JavaScript图片url地址转base64简单示例

vanora1111 2024-04-21 10:51:58编程技术
41

前言

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

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

JavaScript.jpg

一、图片地址转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格式下载

/**
* 下载图片的方法
 * @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()
}

补充知识:

1)将base64图片格式转为可读的url格式

将图片文件转为二进制,然后通过URL的createObjectURL函数,将二进制转为url格式

   function getBase64URL(pic) {
        const blob = base64ImgtoFile(pic)
        const blobUrl = window.URL.createObjectURL(blob);
        return blobUrl
    }

2)将图片转为文件

function base64ImgtoFile (dataurl, filename = 'file') {
        //将base64格式分割:['data:image/png;base64','XXXX']
        const arr = dataurl.split(',')
        // .*? 表示匹配任意字符到下一个符合条件的字符 刚好匹配到:
        // image/png
        const mime = arr[0].match(/:(.*?);/)[1]  //image/png
        //[image,png] 获取图片类型后缀
        const suffix = mime.split('/')[1] //png
        const bstr = atob(arr[1])   //atob() 方法用于解码使用 base-64 编码的字符串
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        })
    }

总结 

到此这篇关于JavaScript图片url地址转base64的文章就介绍到这了,更多相关JS图片url地址转base64内容请搜索站长工具网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长工具网!

base64 JavaScript
THE END
战地网
频繁记录吧,生活的本意是开心

相关推荐

JavaScript开发数独游戏的完整步骤和实现过程
数独是一种起源于日本的逻辑推理游戏,凭借其简单的规则和深刻的逻辑性在全球范围内广受欢迎。作为一名程序员,使用JavaScript开发一个数独游戏不仅可以锻炼编程技巧,还能提...
2024-07-04 编程技术
88

使用HTML+JavaScript实现贪吃蛇游戏(附示例代码)
贪吃蛇游戏是一款经典的休闲游戏,许多人童年时都在各种电子设备上玩过。通过HTML和JavaScript,我们可以创建一个简单但功能齐全的贪吃蛇游戏。本文将详细介绍如何使用HTML和...
2024-07-03 编程技术
96

python和JavaScript的正则表达式详细使用对比
正则表达式是对字符串提取的一套规则,我们把这个规则用正则里面的特定语法表达出来,去匹配满足这个规则的字符串,这篇文章主要给大家介绍了关于python和JavaScript正则表达式详...
2024-06-16 编程技术
50

15款必备的JavaScript开发工具推荐
JavaScript 开发工具多种多样,这些工具可以增强 JavaScript 应用程序的功能,提高 JavaScript 开发效率。本文为大家推荐15款必备的 JavaScript 开发工具,包括 IDE、框架和库...
2024-05-08 编程技术
53

xml2js:一款实现xml转json的JavaScript开源库
xml2js是一个用于将 XML 文档转换为 JavaScript 对象的库。xml2js 提供了一个简单的 API 来解析 XML 数据,并将其转换为 JSON 或者纯 JavaScript 对象。在本文中,我们将简单...
2024-04-29 编程技术
59

JavaScript实现掷骰子小游戏
这篇文章主要为大家详细介绍了JavaScript实现掷骰子小游戏的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
2024-04-24 编程技术
41