点击按钮下载图片(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& ...
随机推荐
- Java 自增原理
很多人都知道 i++ 和 ++i 的区别 a = i++: a = i; i = i+1; a = ++ i; i = i + 1; a = i; 但碰到 i = i ++;的时候很多人就懵了? i是 ...
- Springmvc对就jdbc封装的操作
解释: JdbcTemplate 封装常用的JDBC方法 HibernateTemplate 封装常用Hibernate方法 JdbcDaoSupport JDBC数据访问对象的基类 Hibern ...
- Mxnet编译安装
在安装之前请你们自行安装好cuda和cudnn,记得修改环境变量并且source一下,下面讲一下mxnet的安装 严格按照我的所有的指令 sudo apt-get update sudo apt-ge ...
- 关于css3 渐变色
渐变色在现在来说非常的常用:(注意渐变色只能给背景加 不能给边框加) 方法:-webkit-linear-gradient() 括号里面第一个值为渐变色的开始方向,第二个值为开始的颜色,中间用逗号隔开 ...
- 异常java.lang.NumberFormatException解决
原因一:超出了int类型的取值范围 项目中要把十六进制字符串转化为十进制, 用到了到了Integer.parseInt(str1.trim(), 16):这个是不是后抛出java.lang.Numbe ...
- 虚拟机使用ceph-deploy安装ceph
参考: ceph官网介绍 使用ceph-deploy安装Ceph 12.x 安装虚拟机 首先安装虚拟机环境,虚拟机安装这里不做介绍,本实验使用的镜像为CentOS-7-x86_64-Everythin ...
- OO第十二次作业
规格设计的发展历史 随着计算机软硬件的发展,代码的复杂程度也在不短增加,随着计算机软件规模日渐庞大,结构化程序设计方法开始无法满足用户的需求,面向对象程序设计产生.面向对象程序设计是一场重大的革命,提 ...
- poj1002总结
1.之前一直是runtime error,没有找出具体原因,把冒牌排序改成了合并排序,当输入是100000行时,从大约10s变到1s内 2.感觉是atoi指针导致的,当判断atoi的入参不为NULL时 ...
- mysql 的存储过程 循环 变更某个表里的字段
/*Navicat MySQL Data Transfer Source Server : localhost_3306Source Server Version : 50505Source Host ...
- 在Linux服务器上使用Vbox安装虚拟机
先去官网(www.virtualbox.org)上下载对应Linux系统的Vbox版本. 我这边用的是Oracle Linux 7系统(KDE安装) 使用rpm安装virtualbox 发现报错,按照 ...