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

<!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. 信用卡欺诈数据的分析-excel篇

    本篇文章为大家提供了数据集分析的思路和步骤,同时也分享了自己的经验. 一.背景 反欺诈是一项识别服务,是对交易诈骗.网络诈骗.电话诈骗.盗卡盗号等行为的一项风险识别.其核心是通过大数据的收集.分析和处 ...

  2. 关于scrapy

    Scrapy安装 1,Pip install wheel 2,pip install 复制路径+文件名Twisted-18.7.0-cp36-cp36m-win_amd64.whl 3,Pip ins ...

  3. Kali Linux搭建Go语言环境

     准备: (1)Kali Linux系统(此实验为VMware环境) (2)Go语言安装包 具体过程: (1)到官网下载Go语言安装包,如图示操作(官网可能需要梯子,没有的可以从国内相关网站下载) ( ...

  4. Postgresql插入或更新操作upsert

    幂等性的一个要求是多次操作的结果一致.对于update操作,多次直接的结果都是最后update的值,是满足需求的. 但对于insert,如果已经插入,第二次会报错,duplicate error, 主 ...

  5. java第7次作业

    interface Pet{ public String getName() ; public String getColor() ; public int getAge() ; } class Ca ...

  6. Java 冒泡排序法

    冒泡排序法: public static void Bubbling(int []num){//冒泡排序法 for(int i=0;inum[j+1]){//前一个大于后一个为小到大排序 前一个小于后 ...

  7. npm由来和作用

    npm由来 本文转载自: https://blog.csdn.net/qq_37696120/article/details/80507178 npm作用 本文转载自: https://www.cnb ...

  8. 本周HTML5的知识点

    html5一般用<meta>标签描述网页的摘要信息.标题标签一共有6个,标题字体加粗<h1>最大,<h6>最小. <p>标签标示内容都在一行显示,结束后 ...

  9. 转载-Python单元测试框架——unittest

    一.Pyhon工作原理—— 核心概念:test case, testsuite, TestLoder,TextTestRunner,TextTestResult, test fixture TestC ...

  10. .net webService保存全局变量中

    遇到坑,然后找到解决方案,我就习惯做个记录. 情景:通过webservice调用一个第三方的库,在初始化第三方库的时候需要花费较长时间 目的:希望通过初始化一次,缓存下来,下次直接调用,而不必每次初始 ...