用图片生成图片，涉及到跨域问题

用图片生成图片，涉及到跨域问题

概述

项目中需要用到我服务器上的图，生成分享图。但是由于跨域问题始终无法解决，最好采用如下不是很完美的解决方案，把图转为base64形式，然后再使用。同行们如果有更好的方法，欢迎一起探讨。

代码方法

// 图片转为base64
getBase64(url, callback) { 
    let Img = new Image(),
    dataURL = '';
    let imgExt = url
    Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
    Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题（没用就跟后台沟通添加跨域）
    Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
        let canvas = document.createElement("canvas"), //创建canvas元素
        width = Img.width, //确保canvas的尺寸和图片一样
        height = Img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
        dataURL = canvas.toDataURL('image/'+imgExt); //转换图片为dataURL 
        callback ? callback(dataURL) : null; //调用回调函数
    };
},

调用

this.getBase64(this.share_bg, (dataURL) => { 
   this.share_bg2=dataURL
})

<l-painter-image :src="share_bg2" css="object-fit: cover; object-position: 50% 50%; width: 670rpx; " />

如果觉得有用，请点赞收藏一键三连让更多的同行少走弯路，祝所有同行朋友，程序没bug！