700字范文 > 将html页面或div生成图片-js实现

将html页面或div生成图片-js实现

时间：2019-10-05 05:08:50

Js实现将html页面或div生成图片

今天要分享的是用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, html2canvas.min.js 下载地址: /html2canvas/

[html] view plain copy<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>htmltopic</title><scripttype="text/javascript"src="/h5/js/jquery-1.11.0.min.js"></script><scripttype="text/javascript"src="js/html2canvas.min.js"></script><style>*{margin:0;}.test{width:100px;height:100px;text-align:center;line-height:100px;background-color:#87CEEB;display:inline-block;vertical-align:top;}canvas{margin-right:5px;}.down{float:left;margin:40px10px;}.down2{float:left;margin:40px30px;}</style></head><body><divclass="test">测试</div><div><aclass="down"href=""download="downImg">下载</a></div><div><aclass="down2"href=""download="downImg">下载2</a></div><script>//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊//html2canvas(document.querySelector('div')).then(function(canvas){//document.body.appendChild(canvas);//});//创建一个新的canvasvarcanvas2=document.createElement("canvas");let_canvas=document.querySelector('div');varw=parseInt(window.getComputedStyle(_canvas).width);varh=parseInt(window.getComputedStyle(_canvas).height);//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了canvas2.width=w*2;canvas2.height=h*2;canvas2.style.width=w+"px";canvas2.style.height=h+"px";//可以按照自己的需求，对context的参数修改,translate指的是偏移量//varcontext=canvas.getContext("2d");//context.translate(0,0);varcontext=canvas2.getContext("2d");context.scale(2,2);html2canvas(document.querySelector('div'),{canvas:canvas2}).then(function(canvas){//document.body.appendChild(canvas);//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载document.querySelector(".down").setAttribute('href',canvas.toDataURL());});</script><scriptlanguage="javascript">//这是另一种写法$(function(){$(".down2").click(function(){html2canvas($(".test")).then(function(canvas){varimgUri=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");//获取生成的图片的urlwindow.location.href=imgUri;//下载图片});//html2canvas($('.tongxingzheng_bg'),{//onrendered:function(canvas){//vardata=canvas.toDataURL("image/png");//生成的格式////data就是生成的base64码啦//alert(data);//}//});});});</script></body></html>

--- end ---

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。