非同源图片下载(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"); // 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>