canvas,html2canvas等合成圖片不清晰問題


function  pxRa(cxt) {

var backingStore = context.backingStorePixelRatio ||

context.webkitBackingStorePixelRatio ||

context.mozBackingStorePixelRatio ||

context.msBackingStorePixelRatio ||

context.oBackingStorePixelRatio ||

context.backingStorePixelRatio || 1;

return (window.devicePixelRatio || 1) / backingStore;

};

此方法是獲取設備與canvas一個適合的比例,具體也不知道怎么表達,劇烈來說,設計稿是640,放在iphone 5、6  ,這個值就是2,  電腦滿屏就是1,  6plus  3  等等;

根據這個值去對canvas  進行 方法,縮大放小。

  這是img的 圖,

  下面這是   canvas  畫出來的圖

  是不是看上去很清晰,跟原圖沒有什么區別區別

 代碼 合圖  如下:

var w = $(".container").width();

var h = $(".container").height();

var canvas = document.createElement("canvas");

var context = canvas.getContext("2d");

var ra=getPixelRatio(context);

console.log(ra);

canvas.width = w * ra;

canvas.height = h * ra;

<!-- canvas.style.width = w + "px"; -->

<!-- canvas.style.height = h + "px"; -->

//然后將畫布縮放,將圖像放大兩倍畫到畫布上

context.scale(2, 2);

html2canvas(obj).then(function(canvas) {

var copyStr = canvas.toDataURL("image/png", 0.92);

$('.complex-img').attr('src', copyStr);

<!-- document.body.appendChild(img); -->

});

 

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM