Canvas - 绘制图片模糊问题（canvas 生成图片模糊）

满脑子技术的前端工程师

已于 2023-01-29 21:22:16 修改

阅读量4k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html canvas

于 2022-10-20 19:28:23 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/127433064

版权

Canvas绘制模糊

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

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

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

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

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

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

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

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

在这里插入图片描述

在这里插入图片描述

使用window.matchMedia() 检查devicePixelRatio的值是否发生更改（例如，如果用户将窗口拖动到带有不同的像素密度）。详细请看下面链接
MDN解释

代码如下（示例）：

<script>
 document.querySelector('button').addEventListener('click',function downLoad(){
    
    
   var img = new Image(400,400)
    //这里

关注