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

<!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. Apache Spark 3.0 将内置支持 GPU 调度

    如今大数据和机器学习已经有了很大的结合,在机器学习里面,因为计算迭代的时间可能会很长,开发人员一般会选择使用 GPU.FPGA 或 TPU 来加速计算.在 Apache Hadoop 3.1 版本里面 ...

  2. RuntimeError: Model class app_anme.models.User doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.---python学习错误记录

    untimeError: Model class app_anme.models.User doesn't declare an explicit app_label and isn't in an ...

  3. 怎么在多场景下使用不同的 git 账号 commit

    应用场景 我有多个github的账号,不同的账号对应不同的repo,需要push的时候自动区分账号 我有多个git的账号,有的是github的,有的是单位的gitlab的,不同账号对应不同的repo, ...

  4. abap将内表数据导出为excel文件

    一个不错的方案: WHEN 'EXPORT'. "导出数据 DATA : GT_TEMP TYPE TABLE OF TY_ITEM WITH HEADER LINE. LOOP AT GT ...

  5. 微信POST请求接收不到数据问题

    用微信的wx.request发送POST请求,发现返回结果总是“请填写正确的用户名及密码”.后台查看一下,发现没有获取到值.于是就去网上查了一下. wx.request post 的 content- ...

  6. springboot解决文件上传大小限制

    (1)在配置文件(application.properties)加入如下代码 springboot2.0以下配置为: spring.http.multipart.maxFileSize = 10Mb ...

  7. Spring声明式事务配置详解

    Spring支持编程式事务管理和声明式的事务管理. 编程式事务管理 将事务管理代码嵌到业务方法中来控制事务的提交和回滚 缺点:必须在每个事务操作业务逻辑中包含额外的事务管理代码 声明式事务管理 一般情 ...

  8. virtualenv与virtualenvwrapper的配置

    virtualenv是用来创建python虚拟环境的一个工具(python的Scripts目录下virtualev.exe文件),virtualenvwrapper是用来 便于管理virtualenv ...

  9. 002dayPython学习编码

    由于计算机是美国人发明的,所以计算机最开始只能识别256个字符(ASCII码),而你在计算机中输入中文就会报错 而中国人想让计算机认识中文,就重新编写了一套支持中文的编码(GB2312) 随后由于GB ...

  10. 页面通过Jquery取值然后传值到后台显示underfined是怎么回事？

    页面通过Jquery取值然后传值到后台显示underfined是怎么回事? 一般情况下第一个如果用jQuery取值的,末尾要用val(),如果用$符号取值的,末尾要加上val. eg: busines ...