一般涉及到小程序的项目，都有一个分享的二维码。有的时候大家可能需要把二维码和其他图片合并，做一张海报等等需求。在网上看到很多说是引用jQuery，或者HTML2Canvas和qrcode.js。这里给大家分享的是用canvas合并。
①图片的跨域
image.png
首先呢，我们使用canvas加载绘制图片的时候，会涉及到图片跨域的问题。比如看上面的这个图片
Access to image at 'file:///C:/xxx.jpg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https
这是说在访问“file:///C:/xxx.img”处的图像/频道列表.jpg“已被CORS策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome extension、chrome untrusted、https。
img.html:41 GET file:///C:/Users/xxx.jpg net::ERR_FAILED
这是说在获取这个路径的图片获取失败
因此如果是一张在线的图片，那么就需要在图片服务器上设置跨域头，并且前端加载图片之前将
<img>标签的crossOrigin设置为*，否则就会报错。
为什么会这样呢？具体说法是：可避免未经许可拉取远程网站信息而导致的用户隐私泄露。
解决步骤
1.使用img标签的crossOrigin属性，设置其值为anonymous。如：
var image= new Image();
image.src = 'img/img01.jpg';
image.setAttribute("crossOrigin",'anonymous');
或者：
var image= new Image();
image.src = 'img/umg01.jpg';
image.crossOrigin = 'Anonymous';
也可以：
<img src="" alt="" crossOrigin="Anonymous" />
②图片的加载
canvas绘制是需要加载完成的图片，这里我们就要用到
<img>标签的onload事件，在图片加载完成后立即执行。所有浏览器都支持onload事件，而且上文中也提到创建JavaScript图片对象var image = new Image();。
③图片的合并
直接上代码
<template>
<div>
<img id="avatar" src="" alt="">
</div>
</template>
<script>
import img01 from './img01.png';
import img02 from './img02.png';
export default {
data() {
return {
}
},
created() {
this.handleBlock()
},
methods: {
handleBlock() {
// 动态创建canvas标签
var canvas = document.createElement("canvas");
// 设置canvas画布宽度和高度
canvas.width = 350;
canvas.height = 700;
// 创建context对象
var context = canvas.getContext("2d");
// 用context.rect方法绘制矩形
context.rect(0 , 0 , canvas.width , canvas.height);
// 进行染色
context.fillStyle = "#fff";
// 渲染
context.fill();
// 创建一个image对象
var myImage = new Image();
myImage.src = img02; //背景图片 你自己本地的图片或者在线图片
// 跨域，必须
myImage.crossOrigin = 'Anonymous';
// 使用img的onload事件
myImage.onload = function(){
// 画布定义自己要插入的图片
context.drawImage(myImage , 0 , 0 , 350 , 700);
// 这里是绘制文字，我这里不需要，所以注释了
// context.font = "60px Courier New";
// context.fillText("山有木兮木有枝，心悦君兮君不知",350,450);
// 创建第二个img对象
var myImage2 = new Image();
myImage2.src = img01; //你自己本地的图片或者在线图片
// 图片跨域，必须
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function(){
context.drawImage(myImage2 , 100 ,225 , 175, 175);
// canvas生成img图片
//如果是生成png格式，那么就"image/png"
// 如果是要生成jpg格式，那么就改为"image/jpeg"
var base64 = canvas.toDataURL("image/png");
var img = document.getElementById('avatar');
document.getElementById('avatar').src = base64;
}
}
}
}
}
</script>
附注：最好使用vue或者react，否则单纯的用
html写小demo(.html文件)还是会报图片跨域的问题。
如果是用
html写的小demo，推荐使用VScode编辑器，在编辑器扩展这里（快捷键ctrl+shift+x），打开后输入open，选择open in browser，如图
image.png
安装后，在编辑器ctrl+s保存好代码之后，右击，选择open with Live Server（快捷键Alt+L或者Alt+O）如图：
image.png
这样会自动打开你的默认浏览器，在编辑器修改代码保存后，页面也会自动刷新，只要设置了
img标签的跨域属性，基本不会报错啦
好了，这篇文章到这里就要结束了，如果您正在看这篇文章，觉得对您有帮助的话，就麻烦您的小手手给我点个赞吧^ _ ^，如果有任何疑惑或建议，都可在下方留言，一起交流、学习。
网友评论