js下载图片
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下载图片的更多相关文章
- 关于使用js下载图片
使用js进行图片下载是很常见的需求,但是解决起来却不是那么顺利. 服务器返回了一个图片地址,网上一搜基本都是用a标签的download属性,但是兼容性实在是很差.这里推荐使用blob. 上代码: va ...
- js 下载图片与下载文件的方式一样;保存至本地 ASP.NET 方式
<asp:Button ID="btnDownLoad" runat="server" style="display: none" T ...
- 解决vue、js 下载图片浏览器默认预览而不是下载
在网页上,如果我们下载的地址对应的是一个jpg文件,txt文件等,点击链接时,浏览器默认的是打开这些文件而不是下载,那么如何才能实现默认下载呢? 后端解决 这就是Content-Disposition ...
- js 根据url 下载图片
downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttr ...
- js实现图片下载
<img src='src' data-name='自定义名称'><script>//js实现图片下载 function download(){ var name = $('# ...
- 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地
Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...
- Node.js mm131图片批量下载爬虫1.01 增加断点续传功能
这里的断点续传不是文件下载时的断点续传,而是指在爬行页面时有时会遇到各种网络中断而从中断前的页面及其数据继续爬行的过程,这个过程和断点续传原理上相似故以此命名.我的具体做法是:在下载出现故障或是图片已 ...
- Node.js mimimn图片批量下载爬虫 1.00
这个爬虫在Referer设置上和其它爬虫相比有特殊性.代码: //====================================================== // mimimn图片批 ...
- Node.js aitaotu图片批量下载Node.js爬虫1.00版
即使是https网页,解析的方式也不是一致的,需要多试试. 代码: //====================================================== // aitaot ...
随机推荐
- javaScript的内置对象以及一些常用的方法
前几天,我们学习了JavaScript的入门课程,但是要想做网站,仅仅学会入门是不够的,今后的几天,我将带领大家精通JavaScript,希望大家好好学习! JS内置对象 String对象:字符串对象 ...
- Django框架----models.py(数据库操作文件)
利用一个中间模块 帮助我们连接数据库,写SQL语句,执行SQL语句,拿到结果 models.py 一.数据的对应关系 1. 类 ---> 表 2. 对象 ---> 数据行 3. 属性 -- ...
- 使用token实现在有效期内APP自动登录功能
实现此功能的场景是在当下用户对手机APP体验要求高,并且相对安全前提的推动下诞生:当你下载了一个QQ,微信第一次进行了账号和密码的登录,你从此以后打开应用免去了你每日打开应用都要输入账号跟密码的痛苦过 ...
- C++设计模式 之 “接口隔离” 模式:Facade、Proxy、Mediator、Adapter
“接口隔离”模式 在组建构建过程中,某些接口之间之间的依赖常常会带来很多问题.甚至根本无法实现.采用添加一层间接(稳定)接口,来隔离本来相互紧密关联的接口是一种常见的解决方案. 典型模式 #Facad ...
- PHP进程及进程间通信
一.引言 进程是一个具有独立功能的程序关于某个数据集合的一次运行活动.换句话说就是,在系统调度多个cpu的时候,一个程序的基本单元.进程对于大多数的语言都不是一个陌生的概念,作为"世界上最好 ...
- 20145314郑凯杰《网络对抗技术》恶意DLL注入进程(进程捆绑)的实现
20145314郑凯杰<网络对抗技术>恶意DLL注入进程(进程捆绑)的实现 一.本节摘要 简介:在这部分里,要实现将恶意后门悄无声息地与进程进行捆绑,通过和已运行的进程进行捆绑,达到附着攻 ...
- MVC 视图的简单学习
视图学习第一阶段:http://www.cnblogs.com/meetyy/p/3464432.html 视图学习第二阶段:http://www.cnblogs.com/meetyy/p/34665 ...
- 如何创建自己的python包
写过python的人都知道python最方便也最牛的地方就是它有无数的第三方lib可以直接拿来使用,可以让编写代码变的更容易. 长用的安装第三方lib的方法有easy_install和pip,这两个的 ...
- 【第十一章】 springboot + mongodb(简单查询)
1.mongodb在mac上的安装 下载mongodb,https://www.mongodb.org/ 解压缩到一个指定文件夹,如:/Users/enniu1/Desktop/zjg/mongodb ...
- BZOJ2818: Gcd 欧拉函数
Description 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. Input 一个整数N Output 如题 Sample Input 4 Sam ...