图片转base64跨域问题

vue图片转base64跨域问题,亚马逊存储

1.问题说明：如果资源存在是放在国内（如七牛）在转base64的时候不会发生跨域，但本项目存储空间选择的是亚马逊S3,在转化的时候出现了跨域

2.解决
2.1 首先设置image.crossOrigin = 'Anonymous’来解决跨域
2.2 在图片地址的后面加个随机数解决缓存问题
image.src = “https://service-pic-us-west-1-dev.s3-us-west-1.amazonaws.com/210119144355IWXruAXHKP.jpg?” + Math.random();
完整方法：

Vue.prototype.getBase64Img = function(params) {
        if (params && params.url) {
            var that = this;
            var image = new Image();    
            image.src = params.url + "?" + Math.random();
            image.crossOrigin = 'anonymous';
            image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(image, 0, 0, image.width, image.height);
                var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
                var dataURL = canvas.toDataURL("image/" + ext);
                if (params.callback) {
                    if (params.data) {
                        that[params.callback](dataURL, params.data);
                    } else {
                        that[params.callback](dataURL);
                    }
                };
                return dataURL;
            }
        }
    };