【前端】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上分辨率扩大问题相关推荐

img src php 微信苹果,javascript - file上传的图片，生成到canvas，toDataUrl后在苹果微信上保存下来，是黑色的。...
我用input file上传图片后,加到canvas里,然后toDataUrl,把地址添加到img上显示,是可以得.但我在苹果微信上,长按保存到本地后,却是黑色的,只有在苹果微信上发现到这问题.... ...
dropbox mac_如何在Windows或Mac上启动时阻止Dropbox打开
dropbox mac Dropbox is a handy way to synchronize files across devices via the cloud. By default, Dr ...
mac pdf去水印_如何在Mac上为PDF添加水印
在Mac上为PDF添加水印能够防止别人伪造文档,并且大大提高安全性.因此,当您想在文档上标明所有权或者不希望您的文档被复制时,添加水印就能派上用场.本文将告诉您如何在Mac设备(包括Mojave)上批 ...
如何在 Mac上使用预览解锁 PDF
预览是在 Mac 上打开.查看.编辑和管理图像和 PDF 文件的免费实用程序.它满足您处理 PDF 的所有基本需求,包括加密和解锁 PDF. 好处: 免费使用: 保护和解锁 PDF: 缺点: 需要输入 ...
vmospro启动黑屏_在Mac上从睡眠唤醒中修复黑屏 | MOS86
有时候,当Mac用户从睡眠状态唤醒Mac时,Mac用户可能会遇到黑屏.如果你遇到这个问题,这个问题是很明显的当您尝试从睡眠中唤醒Mac或打开MacBook盖子时,屏幕保持黑色,尽管计算机显然清醒,键盘 ...
如何在Mac上刻录DVD以获取可播放的视频？
从现代计算机中卸下了光驱.因此,您的MacBook将比以前更轻,更薄.但是,如果要在Mac上播放DVD,则需要先将外部硬盘驱动器连接到Mac计算机.以后,您需要插入DVD光盘以提取DVD电影.整个DV ...
如何在Mac上刻录DVD以获取可播放的视频？解答来了
从现代计算机中卸下了光驱.因此,您的MacBook将比以前更轻,更薄.但是,如果要在Mac上播放DVD,则需要先将外部硬盘驱动器连接到Mac计算机.以后,您需要插入DVD光盘以提取DVD电影.整个DV ...
前端 canvas toDataURL() 转图片生成空白图片问题
这里写自定义目录标题前端 canvas toDataUrl() 转图片生成空白图片问题感谢大神解决方法问题发生解决办法原理 vue项目中的使用总结 2022-05-17追加修改前端 ca ...
前端：JS/38/canvas状态的保存和恢复（canvas常用状态大全），canvas画布中图像的变形
canvas状态的保存和恢复 Saving and restoring state 在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法. canvas.save() 保存画布(canva ...

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

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

最新文章

热门文章