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

<!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. win10 adb（Android Debug Bridge）导出日志

    百度了一下 各种设置环境变量.放到system32文件夹(64位系♂统放到C:\Windows\SysWOW64)等 公司电脑win10系统 方便多了 把环境变量设置啥的全删了 adb下载地址:htt ...

  2. firefox 开启安全禁用端口

    firefox 开启安全禁用端口 step1: 在firefox地址栏键入 about:config step2: 新建字符串 network.security.ports.banned.overri ...

  3. react-redux-数据流

    redux是严格的单向数据流 1,store.dispatch(action) 2, reducer(previousState, action), reducer是纯函数.它仅仅用于计算下一个 st ...

  4. java编写ID3决策树

    说明:每个样本都会装入Data样本对象,决策树生成算法接收的是一个Array<Data>样本列表,所以构建测试数据时也要符合格式,最后生成的决策树是树的根节点,通过里面提供的showTre ...

  5. [Oracle][DATAGUARD] LOGICAL STANDBY环境里，有些SEQUENCE无法应用，导致Primary和Standby无法同期

    今天遇到了一个客户,问题是这样的,客户构筑了一个RACtoRAC的 LOGICAL STANDBY环境.并用EM在监视同期情况,发现EM页面上55115和55116这两个SEQUENCE一直在应用. ...

  6. Ubuntu 17.04版本下，opencv进行源码编译安装

    本文主要针对Ubuntu 17.04版本下,opencv进行源码编译安装.开发环境主要针对python 对 openCV库的调用. 安装 gcc cmake 编译环境 sudo apt-get ins ...

  7. highcharts折线图-柱形图等

    https://www.highcharts.com.cn/demo/highcharts/line-basic

  8. docker学习构建镜像---第三章节

    一.docker镜像使用 运行docker容器时,使用的镜像如果在本地不存在,docker会自动从docker镜像仓库中下载,默认是从docker hub公共镜像源下载 在这里,我们需要了解:管理和使 ...

  9. 总结java IDE (eclipse)快捷键

    Eclipse快捷键 10个最有用的快捷键:Eclipse中10个最有用的快捷键组合:一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码 ...

  10. 最近在学习Flask框架，那么就说下jinja2吧~~~

    jinja是组成Flask的模板引擎,先写一个demo吧 {% block body %} <ul> {% for user in users %} <li><a hre ...