有没有小伙伴在开发“纯前端下载图片”性能时，遇到以下的场景？
1. 下载已存在的图片2. 下载某个元素的内容
分享解决以上问题的办法
  • 下载已存在的图片：应用canvas画图，a标签下载
export function downloadImg(imgUrl: string, imgTitle: string) {  var img = new Image();  img.src = imgUrl;  // 必须设置，否则canvas中的内容无奈转换为blob  img.setAttribute('crossOrigin', 'Anonymous');  img.onload = function () {    var canvas = document.createElement('canvas');    canvas.width = img.width;    canvas.height = img.height;    let ctx: any = canvas.getContext('2d');    // 将img中的内容画到画布上    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);    // 将画布内容转换为Blob    canvas.toBlob(blob => {      // blob转为同源url      var blobUrl = window.URL.createObjectURL(blob);      // 创立a链接      var a = document.createElement('a');      a.href = blobUrl;      a.download = imgTitle || '下载图片'; // 设置图片名称      // 触发a链接点击事件，浏览器开始下载文件      a.click();    });  };}

  • 下载某个元素的内容：应用html2canvas插件进行截图，a标签下载
    官网：http://html2canvas.hertzen.com/

    // 引入html2canvasimport html2canvas from 'html2canvas';// 下载凭证按钮const downLoadBtn = () => {  // 获取dom节点  const downLoadDom: any = document.getElementById("downLoadDom");  html2canvas(downLoadDom, {    width: downLoadDom.offsetWidth,    height: downLoadDom.offsetHeight,    scale: 2,  }).then((canvas) => {    const imgBase64 = canvas.toDataURL('image/png');    downLoadMethod(imgBase64);  });}// 下载图片const downLoadMethod = (url: any) => {  var oA = document.createElement("a");  oA.download = '下载图片';  oA.href = url;  oA.className = "downLoad"  document.body.appendChild(oA);  oA.click();  oA.remove();}
留神
  • html2canvas图片跨域问题，可参考文档
    https://blog.csdn.net/qq_3890...
附送

  • 将base64图片转化为formData并上传办法

    // 将base64图片转化为formData并上传export async function transferBase64ToImg(base64String: any) {  var bytes = window.atob(base64String.split(',')[1]);  var array = [];  for (var i = 0; i < bytes.length; i++) {    array.push(bytes.charCodeAt(i));  }  var blob = new Blob([new Uint8Array(array)], { type: 'image/jpeg' });  var formData = new FormData();  formData.append('file', blob, Date.now() + '.jpg');  let res = await API.edit.uploadImage(formData);  return res.fullPath;}