js截图及绕过服务器图片保存至本地(html2canvas)

2021-07-01 06:05

阅读:334

YPE html>

标签:getc   需求   tee   back   ref   git   1.0   enter   font   

  今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地。  

  只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是生成的图片模糊

//直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊
			html2canvas(document.querySelector(‘div‘)).then(function(canvas) {
            		document.body.appendChild(canvas);
      	 	 })

  

   常见的解决方案是,生成一个多倍的画布,然后将其放在较小的容器内,这样就解决了截屏模糊的尴尬。

 还有一个问题是怎么将图片绕过服务器保存至本地,canvas有个toDataURL的方法,然后a标签有个download属性,感觉简直天造之和。当然微信中屏蔽下载,可以借助微信的webview中的一个内置规则,只要是a标签(不含href属性)里面嵌套Img的,可以正常呼出保存至手机和分享给朋友的菜单栏。

以下是简单的demo


	下载
	
	
测试

  

 

 

js截图及绕过服务器图片保存至本地(html2canvas)

标签:getc   需求   tee   back   ref   git   1.0   enter   font   

原文地址:http://www.cnblogs.com/cjh1111/p/7133838.html

上一篇:HTML和XHTML的区别

下一篇:跨域AJAX


评论


亲,登录后才可以留言!