vue 圖片轉Base64

1.圖片地址轉Base64 有回調

　　　　

　　　　getBase64(url, callback) { 

            let Img = new Image(),

            dataURL = '';

            let imgExt = this.extname(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(res.data.data.url, (dataURL) => { 

         console.log(dataURL) //返回的Base64

     })

　　

　　

　　1.1圖片地址轉Base64 無回調

　　　　

　　　　getBase64(url) {

            var that = this

            let Img = new Image(),

            dataURL = '';

            let imgExt = this.extname(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

                that.changeUrl(dataURL) //需要調用Base64的函數

            };

        },