图片链接转base64

 使用canvas

getUrlBase64(url) {
    return new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        let img = new Image();
        console.log(img);
        img.crossOrigin = "Anonymous"; //解决Canvas.toDataURL 图片跨域问题
        img.src = url;
        img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
            const dataURL = canvas.toDataURL("image/jpeg", 1); //获取Base64编码
            resolve(dataURL);
            canvas = null; //清除canvas元素
            img = null; //清除img元素
        };
        img.onerror = function () {
            reject(new Error("Could not load image at " + url));
        };
    });
}

 也可使用html2canvas插件直接把指定元素变成图片

1、安装

npm install html2canvas

2、引入

 import html2canvas from "html2canvas"

3、使用

//this.$refs.registerImg 元素
html2canvas(this.$refs.registerImg).then(canvas => {
  let imgUrl = canvas.toDataURL("image/jpeg", 0.6); //0.6 为图片质量 0~1 仅适用于JPEG和WebP格式。
  //...

});