原因分析:
浏览器window中的devicePixelRatio属性决定了浏览器会用几个像素点来渲染一个像素,假设devicePixelRatio=2,在retina屏下,会用2个像素点的宽度去渲染canvas的1个像素点,因此该canvas在retina屏幕上实际占据的宽高放大了一倍,因此图片会变得模糊。
解决:我们可以放大canvas的坐标系,然后缩小其显示的宽高
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var scaleBy = getPixelRatio(context);
var w = 500;
var h = 500;
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
context.scale(scaleBy, scaleBy);
html2canvas(document.getElementById("posterImg"), {
canvas:canvas,
onrendered: function(canvas) {
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
newImg.width=w;
newImg.height=h;
$("body")[0].appendChild(newImg);
}
});