分类: 日常

2024-06-06发表2024-06-06更新日常1 分钟读完 (大约138个字)

前端图片下载最简单的方案

把base64的资源放到a标签上

// download 图片下载后的名称
<a href="" id="down" download="test.png" target="_blank">jpg静态资源</a>

const dom = document.getElementById('down')
dom.href = '图片base64'

// image转base64
function getImageDataURL(image) {
  // 创建画布
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d');
  // 以图片为背景剪裁画布
  ctx.drawImage(image, 0, 0, image.width, image.height);
  // 获取图片后缀名
  const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
  // 某些图片 url 可能没有后缀名，默认是 png
  return canvas.toDataURL('image/' + extension, 1);
}