### 解决canvas绘制图片，导出后略模糊问题 >需求如下：根据后台返回的海报背景图和一个连接二维码(vue-qr)，合成一张图，然后可以进行长按保存本地操作 #### 思路如下 1. 使用 canvs.drawImage 绘制图片到相应位置 2. canvas.toDataUrl 导出图片数据流到 img 上, 显示到页面 #### 遇到的问题 1. 图片地址是网络地址且不同域名，js中新建Image对象并直接赋值src, 会产生跨域 2. canvas绘制的图片会变得模糊 ##### 跨域问题的解决 1. 将图片网络地址转换为base64流，不推荐 2. 将图片下载放置本地，使用本地固定的图片，部分需求下不能使用, 不理想 3. 将图片网络地址的域名与运行环境域名保持一致即可, 能解决部分，但也不太理想 4. 需要后端配合设置Access-Control-Allow-Origin: * 另外，**img 标签和 js 中的image 都建议增加 crossorigin = "anonymous" 属性** **注意： **有部分网友评论img.setAttribute('crossOrigin', 'anonymous') 必须是写在你赋值 img.src 之前，所以楼主写法有误可以看看这个链接 [去看看, https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror/27260385#27260385](https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror/27260385#27260385) ##### 模糊问题的解决 ###### 未优化的解决方案效果图如下: ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718bc4141baa87a~tplv-t2oaga2asx-image.image) [模糊在线demo](https://codepen.io/mineminego/pen/GRpqpJe) ```html

要绘制的图像：

画布：

DataURL后的图片样式：

``` > 模糊原因分析：在浏览器的 window 对象中有一个 devicePixelRatio 的属性，该属性表示了屏幕的设备像素比，即用几个（通常是2个）像素点宽度来渲染1个像素。举例来说，假设 devicePixelRatio 的值为 2 ，一张 100×100 像素大小的图片，在 Retina 屏幕下，会用 2 个像素点的宽度去渲染图片的 1 个像素点，因此该图片在 Retina 屏幕上实际会占据 200×200 像素的空间，相当于图片被放大了一倍，因此图片会变得模糊。类似的，在 canvas context 中也存在一个 backingStorePixelRatio 的属性，该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。 backingStorePixelRatio 属性在各浏览器厂商的获取方式不一样，所以需要加上浏览器前缀来实现兼容。解决方案： 1.首先一样，获取 Canvas 对象： 2.获取像素比，将 Canvas 宽高进行放大，放大比例为：devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。 3.按实际渲染倍率来缩放canvas。注意基础知识点：要设置canvas的画布大小，使用的是 canvas.width 和 canvas.height；要设置画布的实际渲染大小，使用的 style 属性或CSS设置的 width 和height，只是简单的对画布进行缩放。 4.绘制 ###### 优化后的解决方案效果图如下 ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/18/1718bc675e5230ea~tplv-t2oaga2asx-image.image) [优化后不模糊的在线demo](https://codepen.io/mineminego/pen/RwWRWgO) ```html

要绘制的图像：

画布：

DataURL后的图片样式：

``` 参考链接： [一个关于image访问图片跨域的问题,https://www.jianshu.com/p/8fa0fb53c183](https://www.jianshu.com/p/8fa0fb53c183) [解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported, https://www.jianshu.com/p/6fe06667b748](https://www.jianshu.com/p/6fe06667b748) [解决 canvas 在高清屏中绘制模糊的问题, https://www.html.cn/archives/9297](https://www.html.cn/archives/9297) [High DPI Canvas 高分辨率Canvas（译）,https://www.jianshu.com/p/2cd5143cf9aa](https://www.jianshu.com/p/2cd5143cf9aa) ### 下一篇：[canvas绘制海报02：绘制圆角图片](https://juejin.cn/post/6844904167983562760)