点击按钮下载图片(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& ...
随机推荐
- org.hibernate.ObjectNotFoundException: No row with the given identifier exists
维护老系统时出现的问题,出现的原因我简述一下: table1与table2是关联表,T1中有T2的主键 "T1_id",当T1中的 "T2_id" 不为null ...
- python反射和面向对象的知识并简述基本的异常
# 1.面向对象不是所有的情况都适用# 2.面向对象编程# a.定义类# class Foo:# def 方法1(self,bb):# b.根据类创建对象(创建) # class Person():# ...
- c# Expression 扩展
一.简介 当查询比较复杂时,需要很多判断或者跨方法传递参数时使用 二.扩展类 public static class DynamicLinqExpressions { public static ...
- 自动化扫描src漏洞
首先介绍一下常见的漏洞类型: 漏洞自动扫描思路: 常见的一些github上常用的漏洞采集工具,我们可以利用一款工具进行接口调用直接进行利用 自动化工具的雏形:
- 活代码LINQ——05
片段代码: ' Exercise 9.3 Solution: Invoice.vb ' Invoice class. Public Class invoide ' declare variables ...
- win10 如何关掉自带的杀毒软件 window defender
问题描述: win10系统,自带的杀毒软件 window defender 会实时保护电脑对文件进行检测,将认为的病毒文件自动清除, 造成我想下载的MDK5的注册机一直下载不成功,即使从别处拷贝过来, ...
- SQL-55 分页查询employees表，每5行一页，返回第2页的数据
题目描述 分页查询employees表,每5行一页,返回第2页的数据CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` d ...
- Java 平时作业七
以下是几本计算机书籍的基本信息 编号 书名 价格 出版社 1 JAVA 基础 32 清华大学出版社 2 JAVA WEB 开发 40 电子工业出版社 3 ...
- gprinter佳博打印机androidSDK
最近在用佳博的SDK做打印的功能,由于一直做的是.net,没有android的基础,这个功能我做了一个多月,包括前期调研佳博打印机的打印方式.佳博打印机有两种打印方式,一种是标签打印,要用到TscCo ...
- org.apache.commons.lang.exception.NestableRuntimeException
jar包不全 附上一个好的的博客链接→