复制图片发送给微信好友

项目背景：

网站改版，产品修改原型后，新增了微信转发功能，如下图所示，在该功能中，数据是从后端获取渲染到页面上，在点击复制图片功能的时候，生成一张png图片，放到粘贴板中，去微信上鼠标右键复制的时候，就可以把图片发送给该微信好友；

解决思路：

1.把右边的简历部分的HTML转为图片（html2canvas）;
2.简历中头像是第三方链接，需要转为base64给图片使用
    - 现象：在html2canvas中转图片头像空白，没被转化进去
3.使用navigator.clipboard实现复制图片

代码实现：

` //点击复制图片按钮的时候的代码
copyImg() {
    let _this = this;
    // this.$refs.resume要生成图片的dom元素
    html2canvas(this.$refs.resume).then(function (cvs) {
    var imgUri = cvs.toDataURL("image/png").replace("image/png", "image/octet-stream");
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();
    // 这里的宽高是在html中布局样式后要生成图片的简历的宽高 即在浏览器中宽高是多少这里就写多少
    canvas.width = 500;
    canvas.height = 277;
    img.crossOrigin = "Anonymous";
    img.src = imgUri;
    img.onload = () => {
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            ctx.drawImage(img, 0, 0);
            // 将canvas转为blob
            canvas.toBlob(async (blob) => {
		const data = [
		new ClipboardItem({[blob.type]: blob})];
		await navigator.clipboard.write(data).then(
		() => {_this.$message.success("复制成功");},
		() => {_this.$message.error("复制失败了");});
		});};
	});
},`

头像的外链生成base64复制给头像的img

getBase64Image(url, ref) {
    var that = this;
    var image = new Image();
    image.src = url; // 处理缓存
    image.crossOrigin = "*"; // 支持跨域图片
    image.onload = function () {
            var base64 = that.drawBase64Image(image);
            that.$refs[ref].src = base64;
    };
},
drawBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
},
// 在切换到微信分享的时候，调用this.getBase64Image(this.baseInfo.headPngUrl, "avatar");

至此，复制图片功能完成；

参考资料：

juejin.cn/post/690937… www.cnblogs.com/gangkoudema…