最近我在做一個女神節自定義祝福卡的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截圖的朋友們
