点击保存图片

常用方法两种：

1. 用 canvas 的API toDataUrl()

2. <a>标签的 download 属性（只有 Firefox 和 Chrome 支持 download 属性）

一、使用canvas 的API toDataUrl() 保存图片

步骤：

（1）将图片转成dataURL(base64)

（2）将mime-type改为image/octet-stream,强制让浏览器下载

（3）将图片保存到本地

html部分：

<img src="http://www.27270.com/beautiful/beijingtupian/2017/210978.html" id="img-saved"/>
<button onclick="Download()"></button>

js部分：

  // 1.图片转dataURL(base64)
  function getBase64(url, callback){
    //创建 img 实例
    var Img = new Image(),
      dataURL='';
    Img.src=url;

    //确保图片完整获取到
    Img.onload=function(){
      //创建canvas元素
      var canvas = document.createElement("canvas"),
        width=Img.width,
        height=Img.height;

      //确保canvas的尺寸和图片一样
      canvas.width=width;
      canvas.height=height;
      //将图片绘制到canvas中
      canvas.getContext("2d").drawImage(Img,0,0,width,height);
      //转换图片为dataURL 
      dataURL=canvas.toDataURL('image/png'); 
      callback ? callback(dataURL) : null;
    }
  }

  // 2.将mime-type改为image/octet-stream,强制让浏览器下载
  function fixtype(type) {
    type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
  }

  // 3.将图片保存到本地
  function savaFile(data, filename) {
    var save_link = document.createElement('a');
    save_link.href = data;
    save_link.download = filename;

    var event=document.createEvent('MouseEvents');
    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
    save_link.dispatchEvent(event);
  }

  // 保存图片
  function Download() {
    //1.获取到的图片格式 data:image/Png;base64,......
    var savedImg = $('#img-saved'),
      imgdata = '';

    getBase64(savedImg.attr('src'),function (dataURL) {
      imgdata = dataURL;

      //2.将mime-type改为image/octet-stream,强制让浏览器下载
      imgdata = imgdata.replace(fixtype('png'), 'image/octet-stream');

      //3.将图片保存到本地
      var filename = '' + new Date().getSeconds() + '.png';
      savaFile(imgdata, filename);
    });

  }

适用于PC端

二、使用<a>标签的download属性

<a href="http://www.27270.com/beautiful/beijingtupian/2017/210978.html" download="img.png">
   <img src="http://www.27270.com/beautiful/beijingtupian/2017/210978.html">
</a>

只有 Firefox 和 Chrome 支持 download 属性，要兼容IE：

需要在页面的 <head></head> 部分引入这个js文件

常用方法两种：

一、使用canvas 的API toDataUrl() 保存图片

二、使用<a>标签的download属性

猜你喜欢