需求如下：根据后台返回的海报背景图和一个链接二维码(vue-qr)，合成一张图，然后可以进行长按保存本地操作
思路如下
- 使用 canvs.drawImage 绘制图片到相应位置
- canvas.toDataUrl 导出图片数据流到 img 上, 显示到页面
遇到的问题
- 图片地址是网络地址且不同域名，js中新建Image对象并直接赋值src, 会产生跨域
- canvas绘制的图片会变得模糊
跨域问题的解决
- 将图片网络地址转换为base64流，不推荐
- 将图片下载放置本地，使用本地固定的图片，部分需求下不能使用, 不理想
- 将图片网络地址的域名与运行环境域名保持一致即可, 能解决部分，但也不太理想
- 需要后端配合设置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
模糊问题的解决
未优化的就决方案
效果图如下:
未优化.jpeg
<!DOCTYPE html><html><style> .content{ display: flex; } .poster_img { width: 300px; }</style><body> <div class="content"> <div> <p>要绘制的图像：</p> <img id="tulip" class="poster_img" src="./poster.jpg" alt="The Tulip" /> </div> <div> <p>画布：</p> <canvas id="myCanvas" width="300" style="border:1px solid #d3d3d3;background:#ffffff;"> Your browser does not support the HTML5 canvas tag. </canvas> </div> <div> <p>DataURL后的图片样式：</p> <img class="poster_img" id="canvas_img" src="" alt="" srcset=""> </div> </div></body><script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var canvasImg = document.getElementById("canvas_img") const img = new Image() img.src = document.getElementById("tulip").src; img.onload = function () { const imgScale = img.width / img.height; c.style.width = c.width + 'px' c.style.height = c.width / imgScale + 'px' c.width = c.width; c.height = c.width / imgScale; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, c.width, c.height); canvasImg.src = c.toDataURL('image/jpeg', 1) }</script></html>
模糊原因分析：
在浏览器的 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.绘制
优化后的解决方案
效果图如下
优化后.jpg
<!DOCTYPE html><html><style> .content{ display: flex; } .poster_img { width: 300px; }</style><body> <div class="content"> <div> <p>要绘制的图像：</p> <img id="tulip" class="poster_img" src="./psoter.jpg" alt="The Tulip" /> </div> <div> <p>画布：</p> <canvas id="myCanvas" width="300" style="border:1px solid #d3d3d3;background:#ffffff;"> Your browser does not support the HTML5 canvas tag. </canvas> </div> <div> <p>DataURL后的图片样式：</p> <img class="poster_img" id="canvas_img" src="" alt="" srcset=""> </div> </div></body><script> var getPixelRatio = function (context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }; var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var ratio = getPixelRatio(ctx); ctx.scale(ratio, ratio) var canvasImg = document.getElementById("canvas_img") const img = new Image() img.src = document.getElementById("tulip").src; img.onload = function () { const imgScale = img.width / img.height; c.style.width = c.width + 'px' c.style.height = c.width / imgScale + 'px' c.width = c.width * ratio; c.height = c.width / imgScale; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, c.width, c.height); canvasImg.src = c.toDataURL('image/jpeg', 1) }</script></html>
参考链接：
一个关于image访问图片跨域的问题,https://www.jianshu.com/p/8fa0fb53c183
网友评论