【前端】Canvas通过toDataURL保存时在Mac上分辨率扩大问题

问题描述：

这个问题出现在我尝试通过如下方式保存Canvas内容时:

var imgCanvas = document.getElementById('canvas'); // get the canvas created by p5js	
var imageAsDataURL = imgCanvas.toDataURL("image/png");
localStorage.setItem("name", imageAsDataURL);

Canvas我设置的大小是600x480，这个在低分辨率上的显示器上保存的图片也是600x480，但是在Retina显示器上，得出的结果就是1200x960，结果被放大了两倍。

在查看元素时，可以看到，低分辨率的显示器上：

<canvas id="canvas" class="canvas" width="600" height="480" style="width: 600px; height: 480px;"></canvas>

Retina屏上：

<canvas id="canvas" class="canvas" width="1200" height="960" style="width: 600px; height: 480px;"></canvas>

在style内的width和height表示页面上显示的大小，而外面的width和height才是实际的大小，也就是保存时的真实大小。

也就是说，在高分辨率的显示器上创建Canvas：

canvas = createCanvas(width, height);

会根据window.devicePixelRatio的值，扩大实际保存大小，而页面上渲染的大小与设定时是保持一致的。

我的需求是，设置的Canvas大小为600x480，在新的大小相等的Canvas上加载前面保存的图片，能够全部加载进来，而不是剪切过只剩下一半的图片。

换句话说，我的需求是，如何加载一个分辨率是Canvas两倍大的图片，且全部能够加载进来？

我用到的加载图片到Canvas的方法是：

function loadImageToCanvas(context, image) {
    console.log(context);
    var baseImage = new Image();
    baseImage.src = image;
    baseImage.onload = function() {
        context.drawImage(baseImage, 0, 0);
    };
}

这里有异步加载的问题，且这里传入的image是data:image/png;base64的图片，context是Canvas的上下文。

结果，我发现，理清自己的需求后，在加载图片时，图片的大小是1200x960，但是我们想要它适应600x480大小的Canvas，只需要在drawImage这里，改成：

function loadImageToCanvas(context, image) {
    console.log(context);
    var baseImage = new Image();
    baseImage.src = image;
    baseImage.onload = function() {
    	// 只改这一行即可
       context.drawImage(baseImage, 0, 0, 600, 480);
    };
}

看到，context.drawImage(baseImage, 0, 0, 600, 480);这行是设定了我们想要的图片大小，结果不是剪切，而是缩放，惊喜啊。

注：这个问题困扰我大概5个小时吧，断断续续跨度一天。

END.

【前端】Canvas通过toDataURL保存时在Mac上分辨率扩大问题

猜你喜欢