DownloadImgZP = imgPath => {
const image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
const a = document.createElement('a'); // 生成一个a元素
const event = new MouseEvent('click'); // 创建一个单击事件
a.download = 'img.png' || 'photo'; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgPath;
};

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

  1. 关于使用js下载图片

    使用js进行图片下载是很常见的需求,但是解决起来却不是那么顺利. 服务器返回了一个图片地址,网上一搜基本都是用a标签的download属性,但是兼容性实在是很差.这里推荐使用blob. 上代码: va ...

  2. js 下载图片与下载文件的方式一样;保存至本地 ASP.NET 方式

    <asp:Button ID="btnDownLoad" runat="server" style="display: none" T ...

  3. 解决vue、js 下载图片浏览器默认预览而不是下载

    在网页上,如果我们下载的地址对应的是一个jpg文件,txt文件等,点击链接时,浏览器默认的是打开这些文件而不是下载,那么如何才能实现默认下载呢? 后端解决 这就是Content-Disposition ...

  4. js 根据url 下载图片

    downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttr ...

  5. js实现图片下载

    <img src='src' data-name='自定义名称'><script>//js实现图片下载 function download(){ var name = $('# ...

  6. 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地

    Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...

  7. Node.js mm131图片批量下载爬虫1.01 增加断点续传功能

    这里的断点续传不是文件下载时的断点续传,而是指在爬行页面时有时会遇到各种网络中断而从中断前的页面及其数据继续爬行的过程,这个过程和断点续传原理上相似故以此命名.我的具体做法是:在下载出现故障或是图片已 ...

  8. Node.js mimimn图片批量下载爬虫 1.00

    这个爬虫在Referer设置上和其它爬虫相比有特殊性.代码: //====================================================== // mimimn图片批 ...

  9. Node.js aitaotu图片批量下载Node.js爬虫1.00版

    即使是https网页,解析的方式也不是一致的,需要多试试. 代码: //====================================================== // aitaot ...

随机推荐

  1. python2.7运行selenium webdriver api报错Unable to find a matching set of capabilities

    在火狐浏览器33版本,python2.7运行selenium webdriver api报错:SessionNotCreatedException: Message: Unable to find a ...

  2. Linux基础命令---hwclock

    hwclock   hwclock是一种访问硬件时钟的工具,可以显示当前时间,将硬件时钟设置为指定的时间,将硬件时钟设置为系统时间,以及从硬件时钟设置系统时间.您还可以定期运行hwlock以插入或删除 ...

  3. Shell脚本实现检测某ip网络畅通情况,实战用例

    Shell脚本实现检测某ip网络畅通情况,实战用例 环境准备,linux shell 发送email 邮件:1.安装sendmailyum -y install sendmail安装好sendmail ...

  4. DBCP、c3p0、Druid三大连接池区别

    DBCP.c3p0.Druid三大连接池区别 一.连接池优势 如果一个项目中如果需要多个连接,如果一直获取连接,断开连接,这样比较浪费资源: 如果创建一个池,用池来管理Connection,这样就可以 ...

  5. 20145333茹翔 Exp5 Adobe阅读器漏洞攻击

    20145333茹翔 Exp5 Adobe阅读器漏洞攻击 实验过程 主机为kali的ip地址为:192.168.1.111.靶机windows xp 的ip地址为:192.168.1.110 使用命令 ...

  6. 20165310 学习基础和C语言基础调查

    学习基础和C语言基础调查 做中学体会 阅读做中学之后,了解老师关于五笔练习.减肥.乒乓和背单词的经历,不禁联想到自己学古筝的经历. 成功的经验 兴趣 我其实小时候学过一段时间古筝,但是那时候是因为父母 ...

  7. ubuntu16.04下内核模块解析

    一.环境如下: 1.1内核版本: jello@jello:~$ uname -a Linux jello 4.4.0-89-generic #112-Ubuntu SMP Mon Jul 31 19: ...

  8. POJ 2155 Matrix (二维树状数组)题解

    思路: 没想到二维树状数组和一维的比只差了一行,update单点更新,query求和 这里的函数用法和平时不一样,query直接算出来就是某点的值,怎么做到的呢? 我们在更新的时候不止更新一个点,而是 ...

  9. label表单的关联性

    <input type="checkbox" id="cr" /> <label for="cr">点击关联复选框& ...

  10. Z-score(Z值)的意义--转载

    http://blog.sina.com.cn/s/blog_72208a6a0101cdt1.html http://www.docin.com/p-350677620.html http://we ...