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 ...
随机推荐
- python requests 请求的封装
#encoding=utf-8import requestsimport jsonclass HttpClient(object): def __init__(self): pas ...
- python excel操作 练习:#生成一个excel文件,生成3个sheet,每个sheet的a1写一下sheet的名称。每个sheet有个底色
练习:#生成一个excel文件,生成3个sheet,每个sheet的a1写一下sheet的名称.每个sheet有个底色 #coding=utf-8 from openpyxl import Workb ...
- linux服务器---配置bind
配置bind 1.确定已经安装bind软件,需要安装3 个bind.bind-chroot.bind-util [root@localhost wj]# yum install –y bind bin ...
- Android :64位支持的说明
https://blog.csdn.net/u012400885/article/details/52923765 https://blog.csdn.net/ouyang_peng/article/ ...
- 线程属性pthread_attr_t简介
本文编辑整理自: http://hi.baidu.com/7828058/blog/item/256e16decd1a385e94ee3784.html http://www.ibm.com/deve ...
- Bootstrap+AngularJS对话框实例
<script type="text/javascript" src="/assets/JS/plugins/jquery.min.js">< ...
- Django 搭建后台 favicon.ico 文件操作
Django 搭建后台 favicon.ico 文件操作 使用 django 搭建后台服务器,我用的是 django 1.8 版本以上的,就是路由不是 url 而是 path 的,这里有一个关于fav ...
- C++ compile Microsoft Visual C++ Static and Dynamic Libraries
出处:http://www.codeproject.com/Articles/85391/Microsoft-Visual-C-Static-and-Dynamic-Libraries 出处:http ...
- C# 将文件转换为 Stream
public Stream FileToStream(string fileName) { // 打开文件 FileStream fileStream = new FileStream(fileNam ...
- Codeforces Round #528 div1
完了,看来上一次的flag要应验了,我大概是真的要掉成pupil了吧.. A - Connect Three 这个就是找到x的中间值,y的中间值,然后切一下,然后把所有的点挂到这条边上.但是我做的还是 ...