html中canvas怎么把div保存高清图

本文小编为大家详细介绍“html中canvas怎么把div保存高清图”，内容详细，步骤清晰，细节处理妥当，希望这篇“html中canvas怎么把div保存高清图”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

专注于为中小企业提供网站建设、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业宁波免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

   　　1.选择html2canvas版本（这个版本可以放大倍数保证图片清晰）

默认生成的canvas图片在retina设备上显示很模糊，处理成2倍图能解决这个问题：

varw=$("#code").width();

varh=$("#code").height();

//要将canvas的宽高设置成容器宽高的2倍

varcanvas=document.createElement("canvas");

canvas.width=w*2;

canvas.height=h*2;

canvas.style.width=w+"px";

canvas.style.height=h+"px";

varcontext=canvas.getContext("2d");

//然后将画布缩放，将图像放大两倍画到画布上

context.scale(2,2);

html2canvas(document.querySelector("#code"),{

canvas:canvas,

onrendered:function(canvas){

...

}

});

下载方法：

.on('click','.download',function(){

$('#mycanvas').remove();

var_height=$('.skinReport').height();

//滚到顶部

$('html,body').animate({scrollTop:0});

if(confirm('是否下载肌肤检测报告？'))

{

setTimeout(function(){

varcanvas=document.createElement("canvas"),

w=$('#skinReport').width(),

h=$('#skinReport').height();

canvas.width=w*2;

canvas.height=h*2;

canvas.style.width=w+"px";

canvas.style.height=h+"px";

varcontext=canvas.getContext("2d");

//然后将画布缩放，将图像放大两倍画到画布上

context.scale(2,2);

html2canvas(document.getElementById('skinReport'),{

allowTaint:false,

taintTest:true,

canvas:canvas,

onrendered:function(canvas){

canvas.id="mycanvas";

canvas.style.display='none';

document.body.appendChild(canvas);

//生成base64图片数据

imgData=canvas.toDataURL(type);

//varnewImg=document.createElement("img");

//newImg.src=dataUrl;

//document.body.appendChild(newImg);

//console.log(imgData);

var_fixType=function(type){

type=type.toLowerCase().replace(/jpg/i,'jpeg');

varr=type.match(/png|jpeg|bmp|gif/)[0];

return'image/'+r;

};

//加工imagedata，替换mimetype

imgData=imgData.replace(_fixType(type),'image/octet-stream');

/**

*在本地进行文件保存

*@param{String}data要保存到本地的图片数据

*@param{String}filename文件名

*/

varsaveFile=function(data,filename){

varsave_link=document.createElementNS('http://www.w3.org/1999/xhtml','a');

save_link.href=data;

save_link.download=filename;

varevent=document.createEvent('MouseEvents');

event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);

save_link.dispatchEvent(event);

};

//下载后的问题名

varfilename=aname+'肌肤检测报告'+(newDate()).getTime()+'.'+type;

//download

saveFile(imgData,filename);

},

width:1512,

height:15000

})

},2500)

}

else

{

return;

}

})

读到这里，这篇“html中canvas怎么把div保存高清图”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。