点击按钮下载图片(ie,FF,chrome)
参考网上的一些资料后，总结出来 <!DOCTYPE html>
<html> <head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>图片下载</title>
</head> <body>
<h1>图片下载</h1>
<script> function downloadImage(){ var CAPTURE_SCREEN_FILE_NAME = 'download.jpeg';//文件名 if(typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob( document.getElementById("kvm").msToBlob() /* Canvas to Blob */,
/* Save file name */ CAPTURE_SCREEN_FILE_NAME );
return;
} // Works as fall back mechanism, in case of browsers other than IE.
var link = document.createElement('a');
// We wan't to save the canvas to JPEG format. So giving parameter value for toDataURL() method, as "image/jpeg".
// If not mentioned, canvas will be exported as PNG format.
var canvas=document.getElementById('kvm');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='image/2.jpg';//图片url,可以是本地也可是网络或后端url
img.onload=function () {
ctx.drawImage(img,0,0);
}
link.href = document.getElementById("kvm").toDataURL("image/jpg");
link.download = CAPTURE_SCREEN_FILE_NAME; // Save file name
document.body.appendChild(link); // For Firefox browser
link.click(); // Start Download
link.remove(); // For Firefox browser
}
</script> <canvas id="kvm"></canvas>
<!--<img id="kvm" src="data:image/2.jpg" />-->
<input type="button" onclick="downloadImage()" value="下载" /> </body> </html>
点击按钮下载图片(ie,FF,chrome)的更多相关文章
- js 点击按钮下载图片，另存为
js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...
- 使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- 使用JS代码实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- 页面点击按钮下载excel（原生js)
let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...
- 鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）
在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
- JAVA Eclipse如何设置点击按钮切换图片
右击图片文件夹,新建一个Android XML文件 设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...
- 【demo练习三】：图片水平滚动、点击按钮变更图片动画
要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...
- javascript总结36:DOM-点击按钮切换图片案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
随机推荐
- MVP之高级MVP架构封装
MVP之高级MVP架构封装 No MVP: 我们一般会这样写: public class MainActivity extends AppCompatActivity { private EditTe ...
- js时间过滤方法
js时间过滤 自己写的 记录一下 /** * * 过滤时间格式 * Created by Catlina at 2019.4.26 */ export const setTime = time = ...
- arp嗅探（windows）
本次实验环境:windows本次实验工具:cain汉化版1.点击配置,嗅探器里选一个适配器,点击确定. 2.点击 3.扫描mac地址 4.点击ARP->嗅探器->添加到列表5.点击开始嗅探 ...
- CodeForces - 1040B Shashlik Cooking（水题）
题目: B. Shashlik Cooking time limit per test 1 second memory limit per test 512 megabytes input stand ...
- matplotlib图表组成元素
一.函数 1.plot() -- 展示变量的趋势与变化 用法: plt.plot(x,y,ls="-",lw=2,label="plot figure" ...
- nginx + gunicorn + flask项目发布
程序安装(linux mint) gunicorn安装:pip install gunicorn nginx安装:sudo apt-get install nginx 配置 nginx默认配置信息在/ ...
- js jquery 正则去空字符
1.正则去空字符串: var str1=" a b c "; var strtrim=str1.replace(/\s/g,""); 2.js去前后空字符串: ...
- ubuntu 16.04 安装 opencv +contrib (3.2.0) + python 3.5
环境: - ubuntu 16.04 - OpenCV + contrib 3.2.0 (文中附下载链接) - Python 3.5 基于其他环境的配置应该大同小异. 没时间解释了,直接上车. 更新下 ...
- （2018 Multi-University Training Contest 3）Problem L. Visual Cube
//题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6330//题目大意:按照一定格式画出一个 a×b×c 的长方体. #include <b ...
- CSS之box-sizing
盒子模型是CSS中很重要的概念,它涉及到的无非就是内容(content).填充(padding).边框(border).边界(margin).但是从上两张图可以看出,盒子模型其实有两种类型:标准盒模型 ...