关于canvas绘制图像模糊问题

Posted 2020-11-23 freezenow

前段时间在做项目的裁剪并上传图像功能的时候，发现裁剪后展示的图像比较模糊，之后去百度上搜索了一下，看到有一个解决方案是设置canvas的宽高为css宽高的3倍，使用后感觉效果很好，当时就没管原理接着做功能去了。

在昨天，我想试试做一个鼠标划入图片，图片已鼠标为中心，部分区域放大的demo（类似淘宝商品展示页面的那种）。在制作过程中，我又遇到了canvas转图片模糊的问题，因为当时在解决上个的问题的时候使用了谷歌搜索问题，便又用谷歌搜索了一下（当时忘了刚解决过同样的问题），发现出现这个问题的的原因在于当前显示设备的物理分辨率与CSS分辨率不同，这两个分辨率的比值可在JS中使用window.devicePixelRatio获取，该属性返回一个当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。在获取这个属性的值后，对canvas的宽高进行对应的缩放就可以得到不会模糊的图片啦。

这是示例代码：

// img为用于展示canvas绘图结果的img元素
const img = document.querySelector(‘#img‘);
// 创建canvas
const canvas = document.createElement(‘canvas‘);
const ctx = canvas.getContext(‘2d‘);

const width = 400;
const height = 800;
// 设置canvas的css宽高
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;

// 获取缩放比
const ratio = window.devicePixelRatio || 1;
// 设置canvas的宽高
canvas.width = width * ratio;
canvas.height = height * ratio;
... // 在canvas中绘图

img.src = canvas.toDataURL("image/png");