&& non-homologous picture download picture download && && homologous download page click to download the picture

Non-homologous Pictures Download (html add a canvas tag)

 
method 1:
downloadImgByBase64(url){
    the console.log ( 22222 )
     // create hidden link to download  
     // the let BLOB = ' http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png ';
     // var A = Document. the createElement ( 'A');
     // ; a.style.display = 'none'
     // a.href = BLOB;       
     // a.download = 'QRcode.jpg';
     // document.body.appendChild (A);
     // a.click ();
     //  // remove elements
     // document.body.removeChild (A);
     // canvans download 
    the let the 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");
      // 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;
  },


Method 2:

  downloadImgByBase64cehsi(url) {
  was img = new Image ()
  img.onload = function() {
    var canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
     var CTX = canvas.getContext ( ' 2D ' )
     // contents img is drawn on the canvas 
    ctx.drawImage (img, 0 , 0 , canvas.width, canvas.height)
     // will converting contents of the canvas to Base64 
    var Base64 = canvas.toDataURL ()
     // Create a link 
    var a = document.createElement ( ' a ' )
    a.href = base64
    a.download = '' 
    // trigger a click event link, the browser to start downloading the file 
    a.click ()
  }
  img.src = url
   // must be set, otherwise the contents of the canvas can not be converted to Base64 
  img.setAttribute ( ' crossOrigin ' , ' Anonymous ' )
},
  

2, homologous pictures download

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

 

Guess you like

Origin www.cnblogs.com/shuihanxiao/p/11834853.html