vue的图片地址转为base64格式

Posted 2021-10-14 fengshaopu

getBase64(imgUrl, callback) {
      // 一定要设置为let，不然图片不显示

      const image = new Image();

      // 解决跨域问题

      image.setAttribute("crossOrigin", "anonymous");

      const imageUrl = imgUrl;

      image.src = imageUrl;

      // image.onload为异步加载

      // eslint-disable-next-line no-undef

      image.onload = function() {
        var canvas = document.createElement("canvas");

        canvas.width = image.width;

        canvas.height = image.height;

        var context = canvas.getContext("2d");

        // eslint-disable-next-line no-undef

        context.drawImage(image, 0, 0, image.width, image.height);

        var quality = 0.8;

        // 这里的dataurl就是base64类型

        // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的 
         字符串可能比不转换前的长！

        const dataurl = canvas.toDataURL("image/jpeg", quality);

        callback ? callback(dataurl) : null; //调用回调函数

      };

    }