将图片转化为blob方式，防止画布被污染

背景：在一键下载html为图片时，如果页面中使用了图片，画布会提示被污染，导致报错下载失败，可以将图片转化为blob方式，即可下载。

$(function () {
      var imgResponse = "";
      getImageBlob(   "http://wx.qlogo.cn/mmopen/vi_32/RnLIHfXibgFHlticiclzflpriaLsC3TS9b2Sbj05Wh3vGlhcFutt18dfkXGUt8x11e4q2KHlX4EHHaBb6XylLQW1kQ/0"
      );
    });
//直接读成blob文件对象
    function getImageBlob(url, cb) {
      var img = document.getElementById("bg");
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          imgResponse = this.response;
          //这里面能够直接经过URL的api将其转换，而后赋值给img.src
          //也可使用下面的preView方法将其转换成base64以后再赋值
          img.src = URL.createObjectURL(this.response);
        }
      };
      xhr.send();
    }
    //这里面将blob转换成base64
    function preView(url) {
      let reader = new FileReader();
      getImageBlob(url, function (blob) {
        reader.readAsDataURL(blob);
      });
      reader.onload = function (e) {
        console.log(e.loaded);
      };
    }

实现效果：