下面这种写法有些chrome不起作用

     downLoadCanvas (data, filename = '活动.png') {
var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
saveLink.href = data
saveLink.download = filename var event = document.createEvent('MouseEvents')
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
saveLink.dispatchEvent(event)
}

换这种写法之后OK,base64转blob

    saveImg () {
html2canvas(this.$refs.imageTofile, {
backgroundColor: null
}).then((canvas) => {
let url = canvas.toDataURL('image/png')
let downloadName = this.detailData.basic.act_name + '.png'
this.downloadFile(downloadName, url)
})
},
base64ToBlob (code) {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length let uInt8Array = new Uint8Array(rawLength) for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], {type: contentType})
},
downloadFile (fileName, content) {
let aLink = document.createElement('a')
let blob = this.base64ToBlob(content) // new Blob([content]); let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName
aLink.href = URL.createObjectURL(blob)
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))// 兼容火狐
},

base64图片下载的更多相关文章

  1. base64图片内容下载转为图片保存

    网页中的base64图片内容下载后,利用PIL转为图片保存 from skimage.io import imread from PIL import Image from cStringIO imp ...

  2. js实现svg图形转存为图片下载

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  3. html转化为图片下载

    业务需求:按照客户要求把排课表转化为图片下载到本地.一个月到排课有很多.所以图片会很大 <!DOCTYPE html> <html lang="en"> & ...

  4. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  5. js实现svg图形转存为图片下载[转]

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  6. svg保存为图片下载到本地

    今天给大家说一个将svg下载到本地图片的方法,这里我不得不吐槽一下,为啥博客园不可以直接上传本地文件给大家用来直接下载分享呢,好,吐槽到此为止! 这里需要用到一个js文件,名字自己起,内容如下: (f ...

  7. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

  8. 图片下载&&非同源图片下载&&同源下载&&网页点击下载图片

    非同源图片下载(html添加canvas标签) 方法1: downloadImgByBase64(url){ console.log() // 创建隐藏的可下载链接   // let  blob = ...

  9. Qt+Python开发百度图片下载器

    一.资源下载地址 https://www.aliyundrive.com/s/jBU2wBS8poH 本项目路径:项目->收费->百度图片下载器(可试用5分钟) 安装包直接下载地址:htt ...

随机推荐

  1. HTML-参考手册: HTML ASCII

    ylbtech-HTML-参考手册: HTML ASCII 1.返回顶部 1. HTML ASCII 参考手册 ASCII 字符集被用于因特网上不同计算机间传输信息. ASCII 字符集 ASCII ...

  2. HTML-参考手册: HTML 事件属性

    ylbtech-HTML-参考手册: HTML 事件属性 1.返回顶部 1. HTML 事件属性 全局事件属性 HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某 ...

  3. jmeter3.0启动时报错误 “unable to access jarfile apachejmeter.jar“

    jdk环境也配置好了.但启动时报错.才发现jmeter3.0的bin目录下没有这个.jar文件.复制了一份放到这个目录下就不报这个错了.

  4. spring相关注解

    spring相关注解: 使用之前需要<context:annotation-config/>在配置文件中启用 @Required 应用于类属性的set方法,并且要求该属性必须在xml容器里 ...

  5. Install Apache 2.2.15, MySQL 5.5.34 & PHP 5.5.4 on RHEL/CentOS 6.4/5.9 & Fedora 19-12 [转]

    Step 1: Installing Remi Repository ## Install Remi Repository on Fedora , , , , ## rpm -Uvh http://d ...

  6. nginx安装教程(详细)

    所见即所得编辑器, editorhtml{cursor:text;*cursor:auto} img,input,textarea{cursor:default}.cke_editable{curso ...

  7. PAT甲级——A1141 PATRankingofInstitution

    After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...

  8. 15-python基础-元组

    1.元组的定义 Tuple(元组)与列表类似,不同之处在于元组不能修改. 元组表示多个元素组成的序列. 元组在python开发中,有特定的应用场景. 用于存储一串信息,数据之间使用,分割 元组用()定 ...

  9. javascript中var同时声明多个变量时的原理是什么?

    <script> function show(){ var a=b=c=d=5; } show(); alert(a);//弹a时报错(not defined),而b.c.d都能弹出5 & ...

  10. ubuntu 设置root密码