使用canvas将图片转换为base64格式

es3 回掉函数版本

    /**
     * @param url 图片路径
     * @param callback 结果回调
     */
    function getUrlBase64(url, callback) {
      var canvas = document.createElement("canvas"); //创建canvas DOM元素
      var ctx = canvas.getContext("2d");
      var img = new Image();
      img.crossOrigin = "Anonymous";
      img.src = url;
      img.onload = function() {
        canvas.height = img.height; 
        canvas.width = img.width; 
        ctx.drawImage(img, 0, 0, img.width, img.height); 
        var dataURL = canvas.toDataURL("image/jpeg",1); //可选取多种模式
        callback.call(this, dataURL); //回掉函数获取Base64编码
        canvas = null;
      };
    }

调用

    getUrlBase64("https://qn.antdv.com/geektime-vue.jpeg", function(base64) {
      console.log(base64); //base64编码值
    });

es6/7 Promis版本

    /**
     * @param url 图片路径
     */
    function getUrlBase64(url) {
      return new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //开启img的“跨域”模式
        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));
        };
      });
    }

调用

    getUrlBase64("https://qn.antdv.com/geektime-vue.jpeg").then(base64 => {
      console.log(base64);
    }).catch((err)=>{
        //err处理
    });

base64格式

data:[<mime type>][;base64],<data>

toDataURL 接收两个参数mimeType和quality：

默认图片格式是image/png，quality默认0.92（不过chrome最新版看起来是image/png对应1，image/jpeg对应0.4，不知道为何）

这里使用了image/jpeg清晰度1是一个折衷的选择。 image/jpeg格式，质量高，容量小，大部分场景都适用，正常场景下可以将清晰度设置为0.6~0.8之间即可。 image/png清晰度最好，但容量也最大。