下面这种写法有些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. js匿名函数测试

    js匿名函数测试 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. Scrapy爬虫实战-爬取体彩排列5历史数据

    网站地址:http://www.17500.cn/p5/all.php 1.新建爬虫项目 scrapy startproject pfive 2.在spiders目录下新建爬虫 scrapy gens ...

  3. 巧妙的使用jmeter来发送json格式数据

    1. header-manager 修改content-type值. 如果不修改该值, 则默认会是urlencode的数据格式(例如a=5&b=6). 修改为json后,会告诉服务器,发送的数 ...

  4. JSON Web Token (JWT),服务端信息传输安全解决方案。

    JWT介绍 JSON Web Token(JWT)是一种开放标准(RFC 7519),它定义了一种紧凑独立的基于JSON对象在各方之间安全地传输信息的方式.这些信息可以被验证和信任,因为它是数字签名的 ...

  5. Android组件内核之Service内核原理(三)

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680本篇文章将先从以下三个内容来介绍Service内核原理: [startSe ...

  6. Arcpy里莫名其妙的字段类型(Field type)

    对比6个常用的字段数据类型在Arcpy字段创建与字段属性输出时奇怪的事情: 添加字段使用arcpy.AddField_management: # addfield 的 type参数 # 浮点型,Flo ...

  7. 【目录】mysql 进阶篇系列

    随笔分类 - mysql 进阶篇系列 mysql 开发进阶篇系列 55 权限与安全(安全事项 ) 摘要: 一. 操作系统层面安全 对于数据库来说,安全很重要,本章将从操作系统和数据库两个层面对mysq ...

  8. python之合并多个字典或映射

    问题 现在有多个字典或者映射,你想将它们从逻辑上合并为一个单一的映射后执行某些操作, 比如查找值或者检查某些键是否存在. 解决方案 假如你有如下两个字典: a = {'x': 1, 'z': 3} b ...

  9. Redis哨兵机制(sentinel)

    1.简介: 1.是什么: Redis-Sentinel是Redis官方推荐的高可用(HA)方案,当用Reids 做master-slave高可用方案时,假如master宕机了,redis本身(包括它的 ...

  10. JAVA企业级应用服务器之TOMCAT实战

    JAVA企业级应用服务器之TOMCAT实战 链接:https://pan.baidu.com/s/1c6pZjLeMQqc9t-OXvUM66w 提取码:uwak 复制这段内容后打开百度网盘手机App ...