最近我在做一个女神节自定义祝福卡的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截图的朋友们
网友评论