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的函数

            };

        },