需求我的需求是在手机页面把一段html转成图片,方便用户保存,这样之前的一段html就不用显示了。正常渲染使用html2canvas正常渲染在手机上很模糊。代码如下:vardom=$("#id");html2canvas(dom[0],{canvas:canvas,onrendered:function(canvas){$(dom).css("display","none");$(".img-container").append(Canvas2Image.convertToImage(canvas,width*scaleBy,height*scaleBy,type));}});示例中还使用插件canvas2image.js将canvas转为图片优化vardom=$(".content-container.show-content");varwidth=dom.width();varheight=dom.height();vartype="png";varscaleBy=3;varcanvas=document.createElement('canvas');canvas.width=width*scaleBy;canvas.height=height*scaleBy+35;canvas.style.width=width*scaleBy+'px';canvas.style.height=height*scaleBy+'px';varcontext=canvas.getContext('2d');context.scale(scaleBy,scaleBy);context.font='微软雅黑';html2canvas(dom[0],{canvas:canvas,onrendered:function(canvas){varall_width=$(window).width();$("#content-container").css("display","none");$(".img-container").append(Canvas2Image.convertToImage(canvas,width*scaleBy,height*scaleBy,type));$(".img-containerimg").css("width",all_width+"px").css("height","aotu");}});这个清晰度和原来的dom清晰度差不多,这里有个坑,就是dom的位置需要从左上角开始,不然渲染出来的canvas也会渲染间距,不好处理。如果对你有帮助。或者想关注更多的可以查看博客
