图片下载&&非同源图片下载&&同源下载&&网页点击下载图片

非同源图片下载（html添加canvas标签）

 
方法1：
downloadImgByBase64(url){
    console.log(22222)
    // 创建隐藏的可下载链接  
    // let  blob = 'http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png';
    // var a = document.createElement('a');
    // a.style.display = 'none';
    // a.href = blob;       
    // a.download = 'QRcode.jpg';
    // document.body.appendChild(a);
    // a.click();
    // //移除元素
    // document.body.removeChild(a);
    //canvans下载
    let src = url;
    var canvas = document.createElement('canvas');
    var img = document.createElement('img');
    img.onload = function(e) {
      canvas.width = img.width;
      canvas.height = img.height;
      var context = canvas.getContext('2d');
      context.drawImage(img, 0, 0, img.width, img.height);
      // window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg');
      // saveAs(imageDataUrl, '附件');
      canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
      canvas.toBlob((blob)=>{
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'aaa';
        link.click();
      }, "image/jpeg");
//注：图片为透明图片时使用图片格式 image/jpeg下载图片为黑色背景图，
如果想下周图片为透明图片，使用图片格式image/png

      // context.toBlob(function(blob) {
      // console.log('blob :', blob);


      // let link = document.createElement('a');
      // link.href = window.URL.createObjectURL(blob);
      // link.download = 'aaa';
      // }, "image/jpeg");
    }
    img.setAttribute("crossOrigin",'Anonymous');
    img.src = src;
  },


方法2：

  downloadImgByBase64cehsi(url) {
  var img = new Image()
  img.onload = function() {
    var canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    var ctx = canvas.getContext('2d')
    // 将img中的内容画到画布上
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    // 将画布内容转换为base64
    var base64 = canvas.toDataURL()
    // 创建a链接
    var a = document.createElement('a')
    a.href = base64
    a.download = ''
    // 触发a链接点击事件，浏览器开始下载文件
    a.click()
  }
  img.src = url
  // 必须设置，否则canvas中的内容无法转换为base64
  img.setAttribute('crossOrigin', 'Anonymous')
},
  

2，同源图片下载

 <a :href="http:***.png " download="logo.png"></a>