纯前端图片转换base64

     var img =
      "imagurl"; //imgurl 就是你的图片路径

    function getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      var dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    }

    var image = new Image();
    image.setAttribute("crossOrigin", "Anonymous");
    image.src = img;
    image.onload = function () {
      var base64 = getBase64Image(image);
      console.log(base64);
    };

首先要有一个url，然后用images转成image对象，然后添加crossOrigin是最重要的，不然会报错， 然后再图片加载完毕之后再去转换成base64就好了

顺手封装了一下

    function base64(imgurl, callback) {
      let dataURL;
      function getBase64Image(imgurl, callback) {
        let image = new Image();
        image.setAttribute("crossOrigin", "Anonymous");
        image.src = imgurl;
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let ctx = canvas.getContext("2d");
          ctx.drawImage(image, 0, 0, image.width, image.height);
          let ext = image.src
            .substring(image.src.lastIndexOf(".") + 1)
            .toLowerCase();
          dataURL = canvas.toDataURL("image/" + ext);
          console.log("1");
          callback(dataURL);
        };
      }
     getBase64Image(imgurl, callback);
}

export default base64;

复制上面代码到一个.js文件中

    import base64 from "./base64.js";

引入后直接在过滤器中调用就好

    base64("图片url","回调函数用res就是需要的base64编码")

封装的有点垃，勉强用