前端实现点击下载图片

方法一:使用a标签的download属性。

<a href="1.jpg" download="1.jpg">下载图片</a>

注意：
实现点击下载的前提是要下载的图片是同源的，非IE浏览器中会直接跳转到该图片的预览地址

方法二: vue中点击触发方法下载图片

<img :src="codeImg" alt="二维码图片" style="width:60%;">
<span @click="downloadCodeImg()"></span>

引入图片
import codeIMG from '@/assets/code.jpg';

data中，设置图片变量
data(){
    codeImg:codeIMG,
}

downloadCodeimg方法

methods: {
      downloadCodeImg(){
      console.log('下载图片')
      var a = document.createElement('a')
      a.download = name || 'pic'
      // 设置图片地址
      a.href = codeIMG;
      a.click();
    },
} 

注意：这里有一个坑。如果你的图片是从后台请求过来的，如果你的a标签的href是IP地址的话，此时a标签的download属性会失效，a会被当成一个普通的链接使用。

解决方法一：将IP地址换成域名。

解决方法二：通过后端转发，后端请求第三方资源，返回给前端，前端再保存文件。

方法三: canvas与image互转及图片下载

  //canvas转图片
  canvasToImage (canvas) {
      let image = new Image();
      image.src = canvas.toDataURL('image/png');
      return image;

  }

  //图片转canvas
  imageToCanvas (image) {
      let canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0)
  }
	
 //图片转化base64
 var img = "imgurl";//imgurl 就是你的图片路径  

function getBase64Image(img) {  
     var canvas = document.createElement("canvas");  
     canvas.width = img.width;  
     canvas.height = img.height;  
     var ctx = canvas.getContext("2d");  
     ctx.drawImage(img, 0, 0, img.width, img.height);  
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
     var dataURL = canvas.toDataURL("image/"+ext);  
     return dataURL;  
}  

var image = new Image();  
image.src = img;  
image.onload = function(){  
  var base64 = getBase64Image(image);  
  console.log(base64);  
} 

  //图片下载
  imageDownLoad (image) {
      let aLink = document.createElement('a');
      aLink.href = image.src;
      aLink.download = 'test.png';
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink)
  }  

canvas标签是可以右键保存的，但是这样还是不够友好，如果点击按钮下载，那就最好不过了
思路：

• a标签可以下载资源的
• 只要把canvas转成base64的格式放在href里就好了

实现1：

<a href="" download="test" id="download">下载</a>
<script>
    var dataURL = canvas.toDataURL("image/png");
    var a = document.getElementById("download");
    a.setAttribute("href",dataURL);
</script>

实现2：
1.由button触发事件 创建一个a标签
2.a标签 绑定事件流，触发点击事件

<button onclick="download()">下载</button>
<script>
  var saveFile = function(data, filename){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', '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(){
        var dataURL = canvas.toDataURL("image/png");
        saveFile(dataURL,'test.jpg');
    }
</script>

方法四: 图片都转成base64解决跨域问题

方法一：Blob和FileReader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”]
使用FileReader 对象接收blob

<p id="container1"></p>
  <script>
    getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")
    function getBase64(imgUrl) {
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      // 至关重要
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          var blob = this.response;
          console.log("blob", blob)
          // 至关重要
          let oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            let base64 = e.target.result;
            console.log("方式一》》》》》》》》》", base64)
          };
          oFileReader.readAsDataURL(blob);
          //====为了在页面显示图片，可以删除====
          var img = document.createElement("img");
          img.onload = function (e) {
            window.URL.revokeObjectURL(img.src); // 清除释放
          };
          let src = window.URL.createObjectURL(blob);
          img.src = src
          document.getElementById("container1").appendChild(img);
          //====为了在页面显示图片，可以删除====
 
        }
      }
      xhr.send();
    }
  </script>

方式二：canvas.toDataURL()方法

实现原理：
使用canvas.toDataURL()方法
需要解决图片跨域问题 image.crossOrigin = ‘’;
使用了Jquery库的$.Deferred()方法

<p id="container2"></p>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";
 
    //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
    function getBase64Image(img, width, height) {
      var canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var dataURL = canvas.toDataURL();
      return dataURL;
    }
    function getCanvasBase64(img) {
      var image = new Image();
      //至关重要
      image.crossOrigin = '';
      image.src = img;
      //至关重要
      var deferred = $.Deferred();
      if (img) {
        image.onload = function () {
          deferred.resolve(getBase64Image(image));//将base64传给done上传处理
          document.getElementById("container2").appendChild(image);
        }
        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
      }
    }
    getCanvasBase64(imgSrc)
      .then(function (base64) {
        console.log("方式二》》》》》》》》》",base64);
      }, function (err) {
        console.log(err);
      });
  </script>