js 下载 canvas 兼容移动端

之前的下载方式

      let url = this.$refs.canvas.toDataURL("image/jpeg");
      let link = document.createElement("a");
      link.href = url;
      link.download = `拼接--${this.imageList[0].name}.jpg`;
      link.click();

移动端, uc/ 小米,  会一直在等待下载

采用blob的方式, 参考 MDN blob

其中也提供了polyfill方法

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(",")[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || "image/png"} ) );
  }
 });
}

this.$refs.canvas.toBlob(
  blob => {
    let link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    let filename = `拼接--${this.imageList[0].name}.jpg`;
    link.download = filename;
    link.filename = filename;
    link.click();
  },
  "image/jpeg",
  1 // [0,1] 表示图片质量
);

虽然文件名是乱码, 但是至少可以下载了.....