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. linux服务器---代理认证

    代理认证 proxy代理服务被广泛的使用,为了安全起见,可以在服务器上增加一层安全认证机制.这里使用htpasswd建立认证账号和密码 1.创建认证账号和密码 [root@localhost wj]# ...

  2. 关于Spring中,定时任务执行两次的解决办法

    原因:如果spring-quartz.xml文件,在Spring的配置文件spring-config.xml中被加载,那么定时任务会被Spring和SpringMVC扫描两次,所以会被执行两次. 解决 ...

  3. DNS服务器原理介绍(一)

    DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过主机名,最终 ...

  4. MySQL Crash Course #17# Chapter 25. 触发器(Trigger)

    推荐看这篇mysql 利用触发器(Trigger)让代码更简单 以及 23.3.1 Trigger Syntax and Examples 感觉有点像 Spring 里的 AOP 我们为什么需要触发器 ...

  5. MySQL Crash Course #03# Chapter 5. 6 排序. BETWEEN. IS NULL

    索引 排序检索的数据 SQL 过滤 vs. 应用程序过滤 简单 Where 补充:大小写敏感. BETWEEN. IS NULL Sorting Retrieved Data mysql> SE ...

  6. c++第十四天

    <c++ primer, 5E> 第91页到第94页,笔记: 1.vector支持的操作. v.empty().v.size().v.push_back(t).v[n] 2.试图通过下标访 ...

  7. ELK学习笔记之ELK架构与介绍

    0x00 为什么用到ELK 一般我们需要进行日志分析场景:直接在日志文件中 grep.awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档.文本搜索太 ...

  8. C++设计模式 之 “单一职责”模式:Decorator、Bridge

    part 1 “单一职责”模式 在软件组件的设计中,如果责任划分的不清晰,使用继承得到的结果往往是随着需求的变化,子类急剧膨胀,同时充斥着重复代码,这时候的关键是划清责任. 典型模式 Decorato ...

  9. WordPress REST API 内容注入漏洞

    1 WordPress REST API 内容注入漏洞 1.1 摘要 1.1.1 漏洞介绍 WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.在4.7.0版本后,R ...

  10. 20145324王嘉澜《网络对抗技术》Web基础

    实践要求 ①Web前端HTML: 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML ②Web前端javascipt: 理解JavaScript ...