文档章节

js 下载 canvas 兼容移动端

 阿豪boy
发布于 01/25 23:37
字数 309
阅读 156
收藏 0

很蛋疼的问题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] 表示图片质量
);

 

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

© 著作权归作者所有

粉丝 25
博文 1698
码字总数 1149305
作品 0
西安
私信 提问
加载中

评论(0)

html5 前端语言 博客目录

1,html html 浏览器接收的常用 content-type html 元素超出部分滚动, 并隐藏滚动条 html 图片宽高自适应,居中裁剪不失真 html 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏...

被遗忘的优雅
03/25
0
0
手把手教你实现一个canvas智绘画板

前言 本文主要介绍: 项目介绍 项目效果展示 一步步实现项目效果 踩坑 一、项目介绍 名称: 智绘画板 技术栈: HTML5,CSS3,JavaScript,移动端 功能描述: 支持PC端和移动端在线绘画功能 ...

xyyojl
2019/03/04
0
0
Facebook发布全新JavaScript引擎:Hermes

摘要: JS引擎开始升级了... 原文:技术栈中的爱马仕?Facebook发布全新JavaScript引擎:Hermes 作者:Carson_Ho Fundebug经授权转载,版权归原作者所有。 前言 目前,用户的流畅体验是用户能...

Fundebug
2019/07/20
167
0
技术栈中的爱马仕?Facebook发布全新JavaScript引擎:Hermes

前言 目前,用户的流畅体验是用户能长期使用某个移动客户端应用App的重要指标之一,因此,移动客户端应用App的性能问题备受关注。 最近,一个崭新的JavaScript引擎面世:Hermes,它是Faceboo...

Carson_Ho
2019/07/17
0
0
Highcharts 6.1.2 发布,制作图表的纯 Javascript 类库

Highcharts 6.1.2 发布了,更新如下: Added parameter to xAxis.labels.formatter in addition to scope, allowing arrow functions as formatters. Closes #8580. Adjusted the threshold......

淡漠悠然
2018/09/05
1.2K
3

没有更多内容

加载失败,请刷新页面

加载更多

006. 线程安全之 JAVA 锁相关

1. JAVA中锁的概念 自旋锁: 是指当一个线程在获取锁的时候,如果锁已经被其他线程获取,那么该线程将循环等待,然后不断地判断锁是否能够被成功获取,直到获取到锁才会退出循环。 乐观锁: 假...

紫穹
12分钟前
19
0
如何确定Python变量的类型? - How to determine a Python variable's type?

问题: How do I see the type of a variable whether it is unsigned 32 bit, signed 16 bit, etc.? 如何查看变量的类型,无论是无符号32位,带符号16位等等? How do I view it? 我该如何看...

javail
今天
97
0
略谈分布式系统中的容器设计模式

本文作者:zytan_cocoa 略谈分布式系统中的容器设计模式 谭中意 2020/3/5 前言:云原生(Cloud Native)不仅仅是趋势,更是现在进行时,它是构建现代的,可弹性伸缩的,快速迭代的计算网络服...

百度开发者中心
03/11
128
0
a small thing that made me a little bit depressed

It was just two hours ago,specificly speaking It was 11:48 almost coming close to midneight. I was pratising singing songs in my renting room which is a sharing apartment . I re......

lost_myself
今天
97
0
OSChina 周日乱弹 —— 这中间几个月的地震、核爆、外星人、高达... 去哪了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《Elizabeth》- Ashram 手机党少年们想听歌,请使劲儿戳(这里) @巴拉迪维 :#共...

小小编辑
今天
205
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部