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

<!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. __name__ __doc__ __package__

    __name__只有主程序调用才可以 如果自己的唯一入口被调用 if __name__ == '__main__' : 才执行下面的代码 """ 这个是format的注释 ...

  2. [BZOJ3167]Sao

    Problem 给你n个任务,n-1个关系,ab代表a在b前或者a在b后 问你有几种拓扑序 Solution f[i][j]表示第i个节点前有j个节点的方案数 设当前节点为x,儿子节点为s,若x依赖于 ...

  3. python入门（五）

    一.函数返回值 1.函数如果返回多个值,他会把这几个值放到一个元组里面 2.也可以用多个变量来接收 返回多个值放到元组里面 def say(): num1=1 num2=2 num3=3 return ...

  4. 安装vue脚手架和vue安装element-ui

    首先下载安装node.js,因为vue依赖node.js,然后用npm安装vue,步骤如下: 安装成功后安装element-UI,步骤如下: 完成后用npm run dev 运行项目.

  5. Problem 2: Even Fibonacci numbers

    Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting w ...

  6. 最全面的Redis命令行查阅手册（收藏查看）

    Redis是用C语言实现的,一般来说C语言实现的程序“距离”操作系统更近,执行速度相对会更快. Redis使用了单线程架构,预防了多线程可能产生的竞争问题. 作者对于Redis源代码可以说是精打细磨, ...

  7. Jsoup获取全国地区数据（省市县镇村）

    最近手头在做一些东西,需要一个全国各地的地域数据,从省市区到县镇乡街道的.各种度娘,各种谷歌,都没找到一个完整的数据.最后功夫不负有心人,总算找到一份相对来说比较完整的数据,但是这里的数据也只是精确到 ...

  8. 剑指offer第32题：把数组排成最小的数及关于list.sort()和sorted( Iterable object )函数的相关知识

     * 解题思路:  * 先将整型数组转换成字符数组,然后将String数组排序,最后将排好序的字符串数组拼接出来.关键就是制定比较规则.  * 排序规则如下:  * 若ab > ba 则 a & ...

  9. GitHub入门与实践 读书笔记三：(1)GitHub账户注册教程

    第一步:进入GitHub官网,官网地址:https://github.com/ 第二步:点击Sign up for GitHub 1.昵称一栏:每次在你输入昵称之后,都会检查是否已经被注册.如果被注册 ...

  10. centos安装MySQL5.7

    Mysql安装 一.查看是否安装MySQL # rpm -qa | grep mysql 二.查看所有mariadb的软件包 # rpm -qa | grep mariadb 三.删除相关的maria ...