参考网上的一些资料后，总结出来  

<!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)的更多相关文章

  1. js 点击按钮下载图片，另存为

    js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...

  2. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  3. 使用JS代码实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  4. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  5. 页面点击按钮下载excel（原生js)

    let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...

  6. 鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  7. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

  8. 【demo练习三】：图片水平滚动、点击按钮变更图片动画

    要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...

  9. javascript总结36:DOM-点击按钮切换图片案例

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. spring（IOC）动态代理

    姓名:黄于霞      班级:软件151 1.引入Spring IOC的核心jar包,创建IOC的配置文件beans.xml,内容如下: 1 <?xml version="1.0&qu ...

  2. datatable处理gridview筛选后的值

    DataTable dt = (DataTable)gridView1.GridControl.DataSource; DataRow[] drr = dt.Select(gridView1.RowF ...

  3. vivado封装IP

    reference: https://www.cnblogs.com/mouou/p/5851736.html   1.新建一个测试工程 工程化的设计方法是离不开工程的,第一步往往都是新建工程,后面我 ...

  4. C# 遍历所有的子控件和孙控件，包括容器中的，并批量操作和调用

    这里要用两个知识,一个是递归,一个是队列. //定义一个Control类型的队列allCtrls private static Queue <Control> allCtrls = new ...

  5. 声明一个set集合，使用HashSet类，来保存十个字符串信息，然后通过这个集合，然后使用iterator()方法，得到一个迭代器，遍历所有的集合中所有的字符串；然后拿出所有的字符串拼接到一个StringBuffer对象中，然后输出它的长度和具体内容； 验证集合的remove()、size()、contains()、isEmpty()等

    package com.lanxi.demo1_3; import java.util.HashSet; import java.util.Iterator; import java.util.Set ...

  6. VGG网络结构

    这个结构其实不难,但是它里面训练的一些东西我还没有搞清楚,打算把昨天写的代码传上来,方便日后来看,发现了一个很有意思的库叫TF-slim打算哪天看看有没有好用的东西 from datetime imp ...

  7. SpringMVC云题库错题及答案汇总

    试题分析:D,BeanNameViewResolver:这个视图解析器跟XmlViewResolver基本相同,它是通过把返回的逻辑视图名称去匹配定义好的视图bean对象 @ModelAttribut ...

  8. tomcat管理监控工具：probe（可代替Tomcat Manager）

    版本信息:tomcat8减压版.probe 3.0.0 修改tomcat用户配置,在conf\tomcat-users.xml加入一下配置: <role rolename="admin ...

  9. 18-09-15 潘一刘老师 讲课replace 控件输入函数检测的包

    控件输入 指的是 一般金融机构 输入密码时候需要文本 键盘不能输入时候 用到的

  10. windows下安装memcached，报错：Failed to ignore SIGHUP RESULT too large

    小平板不想装虚拟机, 但是却跑不起memcached 网上虽有解决方案,但都只有一条命令, 没有出处. 翻了半天, 找到这个连接 https://commaster.net/content/insta ...