您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“html中canvas怎么把div保存高清圖”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“html中canvas怎么把div保存高清圖”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
1.選擇html2canvas版本(這個(gè)版本可以放大倍數(shù)保證圖片清晰)
默認(rèn)生成的canvas圖片在retina設(shè)備上顯示很模糊,處理成2倍圖能解決這個(gè)問(wèn)題:
varw=$("#code").width();
varh=$("#code").height();
//要將canvas的寬高設(shè)置成容器寬高的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");
//然后將畫(huà)布縮放,將圖像放大兩倍畫(huà)到畫(huà)布上
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('是否下載肌膚檢測(cè)報(bào)告?'))
{
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");
//然后將畫(huà)布縮放,將圖像放大兩倍畫(huà)到畫(huà)布上
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圖片數(shù)據(jù)
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');
/**
*在本地進(jìn)行文件保存
*@param{String}data要保存到本地的圖片數(shù)據(jù)
*@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);
};
//下載后的問(wèn)題名
varfilename=aname+'肌膚檢測(cè)報(bào)告'+(newDate()).getTime()+'.'+type;
//download
saveFile(imgData,filename);
},
width:1512,
height:15000
})
},2500)
}
else
{
return;
}
})
讀到這里,這篇“html中canvas怎么把div保存高清圖”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。