JavaScript 图片url地址转base64-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript 图片url地址转base64。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

一、图片地址转base64

前言

记录来自于每一次的实际需求；

此次需要做的是将拿到的图片，转png格式下载，看了下数据库返回的地址，有png、svg、jpg格式，我的想法是先通通转base64，再处理成png下载。

一、图片地址转base64

1、先定义一个方法

/**
 * 根据图片的url转换对应的base64值
 * @param { String } imageUrl 如：http://xxxx/xxx.png
 * @returns base64取值
 */
async urlToBase64(imageUrl) {
    return new Promise((resolve, reject) => {
      let canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      let img = new Image()
      img.crossOrigin = 'Anonymous' // 解决Canvas.toDataURL 图片跨域问题
      img.src = imageUrl
      img.onload = function() {
        canvas.height = img.height
        canvas.width = img.width
        ctx.fillStyle = '#fff' // canvas背景填充颜色默认为黑色
        ctx.fillRect(0,0,img.width,img.height)
        ctx.drawImage(img, 0, 0) // 参数可自定义
        const dataURL = canvas.toDataURL('image/jpeg', 1) // 获取Base64编码
        resolve(dataURL)
        canvas = null // 清除canvas元素
        img = null // 清除img元素
      }
      img.onerror = function() {
        reject(new Error('Could not load image at ' + imageUrl))
      }
    })
}

2、存储返回的base64,并转为png格式下载文章来源地址https://www.toymoban.com/news/detail-593889.html

/**
* 下载图片的方法
 * @param { String } imageUrl 如：http://xxxx/xxx.png
 * @returns base64取值
 */
async upload(item) {
 // 此处的src 是图片地址,如: http://xxxx/xxx.png 
  let { src, name } = item
  // 存储base64的值
  let base64 = await this.urlToBase64(src)
  let link = document.createElement('a')
  link.href = base64
  link.download = `${name}.png`
  link.click()
}

到了这里，关于JavaScript 图片url地址转base64的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！