JS实现图片元素转BASE64编码的简单示例

东朝旭

这里分享前端实现图片转 BASE64 的通用方法，支持

1. 缩放

复制代码

、

1. 灰度处理

复制代码

。

1. /**
   
2. * 将指定元素对象转换为 Base64 格式
   
3. * @param {HTMLImageElement|String} img - 图片元素（如通过 document.querySelector 获取）或者选择器
   
4. * @param {Object} ps - 额外参数
   
5. * @param {Number} ps.scale - 缩放，默认 1
   
6. * @param {Boolean} ps.withGray - 是否进行灰度处理，默认 true
   
7. * @param {String} ps.format - 图片格式，默认 image/jpeg
   
8. * @param {Boolean} ps.natural - 是否使用图片元素的原始尺寸，默认 true
   
9. * @returns {String}
   
10. */
    
11. function imgToBase64(img, ps={}) {
    
12.     if(typeof(img)==='string')  img = document.querySelector(img)
    
13.     if(Object.prototype.toString.call(img) != '[object HTMLImageElement]')
    
14.         throw Error(`参数 img 必须是一个有效的 HTMLImageElement 对象或选择器`)
    
15. 
    
16.     ps = Object.assign({scale:1.0, withGray:true, format: "image/jpeg", natural:true}, ps)
    
17.     let canvas = document.createElement("canvas")
    
18.     let ctx = canvas.getContext("2d")
    
19.     let width = ps.natural? img.naturalWidth : img.width
    
20.     let height = ps.natural? img.naturalHeight : img.height
    
21. 
    
22.     canvas.width = width * ps.scale
    
23.     canvas.height = height * ps.scale
    
24.     ctx.drawImage(img, 0, 0, width, height, 0, 0, canvas.width, canvas.height)
    
25. 
    
26.     //灰度处理，一定程度上使得图片内字符更加清晰
    
27.     if (ps.withGray) {
    
28.         let imgD = ctx.getImageData(0, 0, canvas.width, canvas.height)
    
29.         let len = canvas.width * canvas.height * 4
    
30.         for (let i = 0; i < len; i += 4) {
    
31.             let gray = Math.floor((imgD.data[i] + imgD.data[i + 1] + imgD.data[i + 2]) / 3)
    
32.             imgD.data[i] = imgD.data[i + 1] = imgD.data[i + 2] = gray > 100 ? gray : 0
    
33.         }
    
34. 
    
35.         ctx.putImageData(imgD, 0, 0)
    
36.     }
    
37. 
    
38.     return canvas.toDataURL(ps.format)
    
39. }

复制代码

使用方式

1. imgToBase64(".logo")
   
2. // 缩放 0.5 倍
   
3. imgToBase64(document.querySelector(".logo"), {scale:0.5})

复制代码

如需处理远程图片，可以参考上面代码进行改造。
拓展
废话不多说，直接上代码

1. base64 (url) {
   
2.       return new Promise((resolve) => {
   
3.         const image = new Image()
   
4.         // 先设置图片跨域属性
   
5.         image.crossOrigin = 'Anonymous'
   
6.         // 再给image赋值src属性，先后顺序不能颠倒
   
7.         image.src = url
   
8.         image.onload = function () {
   
9.           const canvas = document.createElement('CANVAS')
   
10.           // 设置canvas宽高等于图片实际宽高
    
11.           canvas.width = image.width
    
12.           canvas.height = image.height
    
13.           canvas.getContext('2d').drawImage(image, 0, 0)
    
14.           // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
    
15.           const dataURL = canvas.toDataURL('image/jpeg')
    
16.           resolve(dataURL)
    
17.         }
    
18.         image.onerror = () => {
    
19.           resolve({ message: '相片处理失败' })
    
20.         }
    
21.       })
    
22.     },

复制代码

我们传入一个图

1. async mounted () {
   
2.     // this.init()
   
3.     const url = await this.base64('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg')
   
4.     console.log(url)
   
5.   },

复制代码

片地址看看是否成功

但是，一般我们在做这样的需求前，处理的图片肯定不止一张，接下来就要批量处理，但是这个方法是异步，我们要将一个数组内的每个对象的地址都转成base64,才算真正完成我们的功能。前端一般接收到后端的数据一般是这种格式。

但是我们正常使用map函数遍历去将图片地址转成base64，上代码：

1. const newImgOBj = await Promise.all(this.imgOBj.map(async (item) => {
   
2.       return {
   
3.         name: item.name,
   
4.         img: await this.base64(item.img)
   
5.       }
   
6.     }))
   
7.     console.log(newImgOBj)

复制代码

打印一下看结果发现我们的图片地址已经变成了base64编码。

最后我们将图片使用img标签正常渲染就好了，小知识：浏览器在识别同一个一模一样的图片地址，浏览器只会请求一遍该图片资源哦。
以上就是JS实现图片元素转BASE64编码的简单示例的详细内容，更多关于JS图片转BASE64的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

深海底的鱼当

顶顶更健康！！！