快捷導(dǎo)航

JS實(shí)現(xiàn)圖片元素轉(zhuǎn)BASE64編碼的簡單示例

更新時(shí)間：2023年12月26日 11:14:05 作者：集成顯卡

在Web開發(fā)中,我們經(jīng)常需要將圖片轉(zhuǎn)換為Base64格式,以便在不依賴外部資源的情況下直接在HTML中使用,在這篇文章中,我將向您展示如何使用JavaScript將圖片元素轉(zhuǎn)BASE64編碼,需要的朋友可以參考下

這里分享前端實(shí)現(xiàn)圖片轉(zhuǎn) BASE64 的通用方法，支持縮放、灰度處理。

/**
* 將指定元素對象轉(zhuǎn)換為 Base64 格式
* @param {HTMLImageElement|String} img - 圖片元素（如通過 document.querySelector 獲取）或者選擇器
* @param {Object} ps - 額外參數(shù)
* @param {Number} ps.scale - 縮放，默認(rèn) 1
* @param {Boolean} ps.withGray - 是否進(jìn)行灰度處理，默認(rèn) true
* @param {String} ps.format - 圖片格式，默認(rèn) image/jpeg
* @param {Boolean} ps.natural - 是否使用圖片元素的原始尺寸，默認(rèn) true
* @returns {String}
*/
function imgToBase64(img, ps={}) {
    if(typeof(img)==='string')  img = document.querySelector(img)
    if(Object.prototype.toString.call(img) != '[object HTMLImageElement]')
        throw Error(`參數(shù) img 必須是一個(gè)有效的 HTMLImageElement 對象或選擇器`)

    ps = Object.assign({scale:1.0, withGray:true, format: "image/jpeg", natural:true}, ps)
    let canvas = document.createElement("canvas")
    let ctx = canvas.getContext("2d")
    let width = ps.natural? img.naturalWidth : img.width
    let height = ps.natural? img.naturalHeight : img.height

    canvas.width = width * ps.scale
    canvas.height = height * ps.scale
    ctx.drawImage(img, 0, 0, width, height, 0, 0, canvas.width, canvas.height)

    //灰度處理，一定程度上使得圖片內(nèi)字符更加清晰
    if (ps.withGray) {
        let imgD = ctx.getImageData(0, 0, canvas.width, canvas.height)
        let len = canvas.width * canvas.height * 4
        for (let i = 0; i < len; i += 4) {
            let gray = Math.floor((imgD.data[i] + imgD.data[i + 1] + imgD.data[i + 2]) / 3)
            imgD.data[i] = imgD.data[i + 1] = imgD.data[i + 2] = gray > 100 ? gray : 0
        }

        ctx.putImageData(imgD, 0, 0)
    }

    return canvas.toDataURL(ps.format)
}

使用方式

imgToBase64(".logo")
// 縮放 0.5 倍
imgToBase64(document.querySelector(".logo"), {scale:0.5})

如需處理遠(yuǎn)程圖片，可以參考上面代碼進(jìn)行改造。

拓展

廢話不多說，直接上代碼

base64 (url) {
      return new Promise((resolve) => {
        const image = new Image()
        // 先設(shè)置圖片跨域?qū)傩?
        image.crossOrigin = 'Anonymous'
        // 再給image賦值src屬性，先后順序不能顛倒
        image.src = url
        image.onload = function () {
          const canvas = document.createElement('CANVAS')
          // 設(shè)置canvas寬高等于圖片實(shí)際寬高
          canvas.width = image.width
          canvas.height = image.height
          canvas.getContext('2d').drawImage(image, 0, 0)
          // toDataUrl可以接收2個(gè)參數(shù)，參數(shù)一：圖片類型，參數(shù)二： 圖片質(zhì)量0-1（不傳默認(rèn)為0.92）
          const dataURL = canvas.toDataURL('image/jpeg')
          resolve(dataURL)
        }
        image.onerror = () => {
          resolve({ message: '相片處理失敗' })
        }
      })
    },

我們傳入一個(gè)圖

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

片地址看看是否成功

但是，一般我們在做這樣的需求前，處理的圖片肯定不止一張，接下來就要批量處理，但是這個(gè)方法是異步，我們要將一個(gè)數(shù)組內(nèi)的每個(gè)對象的地址都轉(zhuǎn)成base64,才算真正完成我們的功能。前端一般接收到后端的數(shù)據(jù)一般是這種格式。

但是我們正常使用map函數(shù)遍歷去將圖片地址轉(zhuǎn)成base64，上代碼：

 const newImgOBj = await Promise.all(this.imgOBj.map(async (item) => {
      return {
        name: item.name,
        img: await this.base64(item.img)
      }
    }))
    console.log(newImgOBj)

打印一下看結(jié)果發(fā)現(xiàn)我們的圖片地址已經(jīng)變成了base64編碼。