关于htmlcanvas截图问题，解决了清晰度问

最近我在做一个女神节自定义祝福卡的html5页面，要生成截图的功能，利用htmlcanvas.js可以整屏或者整个指定div进行截屏。图中遇到很多问题，现在已解决截图和清晰度等问题。不多说，代码如下：

我们知道设备的devicePixelRatio决定了canvas的清晰度, 文中解决这个问题的核心方法是放大canvas然后缩小显示到原比例。于是我在html2canvas.js中做了如下改动：

var node= ((nodeList ===undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];

node.setAttribute(html2canvasNodeAttribute +index,index);

returnrenderDocument(node.ownerDocument,options,node.ownerDocument.defaultView.innerWidth*2,node.ownerDocument.defaultView.innerHeight*2,index).then(function(canvas) {

if(typeof(options.onrendered) ==="function") {

log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");

options.onrendered(canvas);

}

return canvas;

});

另外在页面的js加入截图的代码就可以完美解决，代码如下：

var width=$("#cutImg").width();   //准备截图div的宽

var height=$("#cutImg").height();  //准备截图div的高

varscaleBy=3;//缩放比例

html2canvas(document.getElementById('cutImg'), {  //cutImy为需要截图的div对应的id

canvas:canvas,

allowTaint:true,

taintTest:false,

onrendered:function(canvas) {

canvas.id="mycanvas";

//                    document.body.appendChild(canvas);

//生成base64图片数据

var dataUrl= canvas.toDataURL("image/png");

document.execCommand("dataUrl");

var newImg=document.createElement("img");

newImg.crossOrigin="anonymous";//关键

newImg.src=dataUrl;

$("#cutImg").html('');

//                    $("#cutImg").append(canvas,width* scaleBy,height* scaleBy,type);

$("#cutImg").append(newImg);

//                    $("#cutImg").html(newImg);

//                    $("#cutImg").append(Canvas2Image.convertToImage(canvas,width* scaleBy,height* scaleBy,type));//这是放大了很3倍的图片

$("#cutImg").find("img").addClass("comPos");

$("#cutImg").find("img").css("width",width+"px").css("height",height+"px");//在将放大的图片用css缩小,在手机上就非常清晰了

$(".js_goddess-modelBg").show();

},width:width*scaleBy,height:height*scaleBy  //scaleBy可以改为具体数字3，我是把canvas放大3倍后再缩小，我是初始化了var scaleBy

= 3;

});

希望笔下写的内容，可以帮到有需要用js截图的朋友们