画像からbase64へのクロスドメインの問題

Vue イメージから Base64 へのクロスドメインの問題、Amazon ストレージ

1. 問題の説明: リソースが中国に存在する場合 (Qiniu など)、base64 の変換時にクロスドメインは発生しませんが、このプロジェクトのストレージ容量は Amazon 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;
            }
        }
    };