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. 44 道 JavaScript 难题

    JavaScript Puzzlers原文 1. ["1", "2", "3"].map(parseInt)   答案:[1, NaN, N ...

  2. Maven的scope的值

    Maven的依赖范围 在pom.xml文件中,有个元素是scope,用来表示依赖的范围.之所以会有依赖范围,是因为Maven在编译.测试和运行项目时会各自使用一套classpath,依赖范围就是用来控 ...

  3. 文件系统、服务、防火墙、SELINUX——安全四大金刚

    一提到安全,大家都会想到防火墙,和文件系统权限.而实际工作环境中,我们在Linux的安全配置,会涉及到四个级别.我们思考一个场景,你要在百度盘中存放一个文件,这个动作需要考虑下面四个权限. 1 fir ...

  4. UVA1714 Keyboarding(bfs)

    UVA1714 Keyboarding bfs 坑点很多的一题(由于一本通的辣鸡翻译会错题意*n). 1.多组数据 2.如果某方向上没有不同字符光标不会动 我们每次预处理出每个点向四个方向下次到达的点 ...

  5. Python3.x:import urllib2报错解决方案

    Python:import urllib2报错解决方案 python2和3有些不一样: python2:输出为print 'hello world' python3:输出为print('hello w ...

  6. PHP 开发 api 接口安全验证

    原文链接:http://blog.csdn.net/li741350149/article/details/62887524

  7. 用Nodejs连接MySQL(原文链接)

    原文链接:http://blog.fens.me/nodejs-mysql-intro/

  8. 自动对比度的opencv实现

    在http://www.cnblogs.com/Imageshop/archive/2011/11/13/2247614.html 一文中,作者给出了“自动对比度”的实现方法,非常nice 实际实现过 ...

  9. 20145304 Exp9 Web安全基础实践

    20145304 Exp9 Web安全基础实践 实验后回答问题 (1)SQL注入攻击原理,如何防御 SQL注入是将查询语句当做查询内容输入到查询的框中,以此来使服务器执行攻击者想让它执行的语句,而不是 ...

  10. STM32.定时器

    一.定时器分类 11个定时器: 定时器: 1.8  高级(7路PWM输出) 2.3.4.5 通用(4路) 6.7    基本 2个看门狗 1个sysTick 时钟分布: 二.这里我们主要对定时器中 定 ...