点击按钮下载图片(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& ...
随机推荐
- 生成不同尺寸dimen的xml文件以及文件夹
import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...
- javascript中的add(1)(2)(3)(4)是怎么实现的
javascript中的add(1)(2)(3)(4)是怎么实现的?实现如下: var fn = function(a){ let sum = a; let tempFn = function(b){ ...
- 浅谈redis的HyperLogLog与布隆过滤器
首先,HyperLogLog与布隆过滤器都是针对大数据统计存储应用场景下的知名算法. HyperLogLog是在大数据的情况下关于数据基数的空间复杂度优化实现,布隆过滤器是在大数据情况下关于检索一个元 ...
- idea找不到tools.jar下的内容的解决方法
今天学习javac编译原理时,发现找不到tools.jar. 解决办法:将D:\Program Files\Java\jdk1.8.0_151\lib目录下的tools.jar复制到D:\Progra ...
- 电脑小白和ta的小白电脑——JAVA开发环境
JAVA开发环境的搭建有一点点复杂,不过一步一步来一般不会出错. (一)下载JDK 首先我们需要下载java开发工具包JDK,可以通过官网下载:http://www.oracle.com/techne ...
- Static，重载，List的知识点
声明为static的成员可以在它的类的对象创建之前被访问,静态方法不能访问实例变量. 声明为static的变量称为静态变量或类变量,static可以用来修饰属性.方法和代码块. 多重继承的初始化顺序是 ...
- Java虚拟机学习-对象的创建
虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载.解析和初始化过.如果没有,必须先执行相应类的加载过程. 类加载 ...
- DevExpress WinForms使用教程：皮肤颜色和LookAndFeel
[DevExpress WinForms v18.2下载] v18.2版本中更改了控制背景颜色和皮肤一起处理的方式.在v18.1中引入了Project Settings页面,其中包含一个skin se ...
- C# WebAPI分页实现分享
第一次分享代码,不足或不对之处请指正.. 需求:微信端传递不同的参数调用WebAPI进行分页查询菜谱计划点评结果 思路:基于视图来查询,根据传递的不同参数拼接分页查询Sql来查询. 分页的sql如下 ...
- Centos6.5 安装 RabbitMQ 3.7.11
RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python.Ruby..NET.Java.JMS.C.PHP.ActionScript.XMPP.STO ...