标签：tle 图片 blank odata api ocs png etc 模糊
前段时间在做项目的裁剪并上传图像功能的时候，发现裁剪后展示的图像比较模糊，之后去百度上搜索了一下，看到有一个解决方案是设置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");
标签：tle 图片 blank odata api ocs png etc 模糊
原文地址：https://www.cnblogs.com/FreezeNow/p/12015017.html
