轻松解决Canvas绘制图片模糊的问题

Canvas绘制模糊

---

---

零、问题背景与解决思路

背景：在浏览器中下载图片的时候，会遇到图片被自动打开的场景。

思路： 1.我想通过图片url的方式，先注册一个Image去接受图片。2.然后通过canvas去绘制出来图片。 3.再重新下载图片的方式去实现。

***然后就遇到了使用canvas渲染的图片有一个模糊的问题***

提示：以下是本篇文章正文内容，下面案例可供参考

一、涉及到的Api

1.关于window.devicePixelRatio

canvas出现模糊的原因

Window 接口的 devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。
这个比例值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。

简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

当处理标准显示器与HiDPI或 Retina 显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。

我在mac上这个值是:2在我自己的电脑上这个值是:1.25

`

第一块屏幕测试 window.devicePixelRatio 的值(微软系统)

第二块屏幕测试 window.devicePixelRatio 的值(mac系统)

2.关于Window.matchMedia()

使用window.match