js 下载 canvas 兼容移动端

最新推荐文章于 2023-12-28 12:11:38 发布

阿豪boy

最新推荐文章于 2023-12-28 12:11:38 发布

阅读量192

点赞数

文章标签： url html js html5 blob

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065325

版权

原文链接: js 下载 canvas 兼容移动端

上一篇: vscode 常用配置

下一篇: npm 发布webpack插件 webpack-html-cdn-plugin

很蛋疼的问题 PC 上好好的 , 移动端下载不了 , 貌似前端 js 生成的时 base64 格式的图片数据，移动端无法直接下载 , 但是 chrome 移动端和 pc 端都没问题 , 国产的几个浏览器全部挂了

之前的下载方式

      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] 表示图片质量
);