实战：JS下载图片

qingzhen568

于 2021-10-27 10:21:29 发布

阅读量9.8k

点赞数 3

分类专栏： js vue实战文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43919509/article/details/120987538

版权

vue实战同时被 2 个专栏收录

28 篇文章

订阅专栏

17 篇文章

订阅专栏

这段代码展示了如何将图片转换为Base64编码并实现单张图片的下载功能。通过创建canvas，绘制图片，获取图片后缀名，最后使用data URL将图片转换为Base64格式。同时，为了防止浏览器缓存，添加了时间戳，并处理了图片跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 获取图片的 base64 编码
 * @param image 图像对象
 * @return {string} 返回已编码的 base64数据
 */
const getImageBase64 = 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)
}

/**
 * 单张图片下载
 * @param url 图像链接
 * @param downloadName 图片名称
 */
export const downloadImage = (url, downloadName) => {
  const link = document.createElement('a')
  link.setAttribute('download', downloadName)
  const image = new Image()
  // 添加时间戳，防止浏览器缓存图片
  image.src = url + '?timestamp=' + new Date().getTime()
  // 设置 crossOrigin 属性，解决图片跨域报错
  image.setAttribute('crossOrigin', 'Anonymous')
  image.onload = () => {
    link.href = getImageBase64(image)
    link.click()
  }
}