点击按钮下载图片(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& ...
随机推荐
- Linux c获取任意路径的硬盘使用情况
没有什么好说的,其实就是获取硬盘的statfs信息结构 代码如下: #include <stdio.h> #include <stdlib.h> #include <sy ...
- Android Studio中使用Git进行代码管理（分支、合并）
打开Android Studio选择,选择从Git检出代码 也可以从VCS如下点击 去远程仓库复制地址,这里以码云Gitee第三方代码托管为例,类似Github的界面,点击右边复制项目地址 填一下配置 ...
- Spring使用ioc注解方式配置bean
context层 : 上下文环境/容器环境 applicationContext.xml 具体示例: 现在ioc容器中添加context层支持: 包括添加xmlns:context.xsi:schem ...
- java并发实战-基础知识
1.线程安全 共享:变量可以由多个线程同时访问.可变:变量值在生命周期内可以变化. 当多个线程访问某个类时,这个类始终都能表现出正确的行为,称这个类是线程安全的. 无状态对象是线程安全的. 2.原子性 ...
- typescript 属性默认值使用箭头函数 this指向问题
今天注意到前端小伙伴用react 定义component class的方法的时候是通过箭头函数的方式,表示好奇. class Test extends React.Component { public ...
- SpringBoot Actuator
SpringBoot Actuator 提供了检查项目内部信息的一整套API,通常在项目启动时可以看到. 1.引入依赖包 <dependency> <groupId>org.s ...
- Java面试题之多线程打印
概述 作为程序员经常在面试的时候遇到多线程的问题,我印象比较深刻的就是下面这道题:写两个线程,一个线程打印 1~52,另一个线程打印字母A-Z.打印顺序为12A34B56C……5152Z.看这个题目已 ...
- 使用LinkedList类生成一个集合对象，循环加入“小样1”，“小样2”,“小样3”,“小样4”,“小样5”……“小样100”。输出这个集合的大小。再使用循环删除这个集合中所有名字为偶数的对象，比如“小样6”，“小样100”，都是偶数名。最后：循环输出集合中所有的对象，看是否删除成功。
package com.lanxi.demo1_8; import java.util.Iterator; import java.util.LinkedList; public class Test ...
- Can peel peel solve pesticide problem
Can peel peel solve pesticide problem? Middle peasants medicinal modern agriculture more and more, t ...
- spring-data-mongodb 使用原生aggregate语句
除了特殊注释外,本文的测试结果均基于 spring-data-mongodb:1.10.6.RELEASE(spring-boot-starter:1.5.6.RELEASE),MongoDB 3.0 ...