JS將圖片轉(zhuǎn)Base64的2種方法代碼
更新時(shí)間：2024年05月09日 11:35:19 作者：山楂樹の
這篇文章主要給大家介紹了關(guān)于JS將圖片轉(zhuǎn)Base64的2種方法,base64 其實(shí)是一種編碼轉(zhuǎn)換方式,將ASCII字符轉(zhuǎn)換成普通文本,是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一,需要的朋友可以參考下
第一種：Blob和FileReader 對象
實(shí)現(xiàn)原理：
使用xhr請求圖片,并設(shè)置返回的文件類型為Blob對象[xhr.responseType = “blob”]
使用FileReader 對象接收blob
return new Promise(resolve => {
let xhr = new XMLHttpRequest()
xhr.open('get', src, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status == 200) {
let blob = this.response
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
const base64 = e.target.result
resolve(base64)
}
oFileReader.readAsDataURL(blob)
}
}
xhr.send()
})第二種：canvas.toDataURL()
實(shí)現(xiàn)原理：
使用canvas.toDataURL()方法
需要解決圖片跨域問題 image.crossOrigin = ‘’;
return new Promise(resolve => {
const img = new Image()
img.crossOrigin = ''
img.src = src
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx?.drawImage(img, 0, 0, img.width, img.height)
const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
const dataURL = canvas.toDataURL('image/' + ext)
resolve(dataURL)
}附：需要轉(zhuǎn)化的圖片很可能存在跨域問題，要么后端處理，要么前端處理。這里是使用時(shí)在vue中處理了跨域問題
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://-----:8084'
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},總結(jié)
到此這篇關(guān)于JS將圖片轉(zhuǎn)Base64的2種方法代碼的文章就介紹到這了,更多相關(guān)JS圖片轉(zhuǎn)Base64內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)戰(zhàn)(原生range和自定義特效)簡單實(shí)例
下面小編就為大家?guī)硪黄狫avaScript實(shí)戰(zhàn)(原生range和自定義特效)簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
javascript之大字符串的連接的StringBuffer 類
javascript之大字符串的連接的StringBuffer 類...2007-05-05
本篇文章是對使用js設(shè)置url參數(shù)的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
JavaScript Dom實(shí)現(xiàn)輪播圖原理和實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript Dom實(shí)現(xiàn)輪播圖原理和實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了javascript關(guān)于繼承的用法,實(shí)例匯總了常見的javascript關(guān)于繼承的用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
JavaScript實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼流程介紹
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端發(fā)送短信驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-10-10
這篇文章主要介紹了taro開發(fā)微信小程序的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
React?diff算法面試考點(diǎn)超詳細(xì)講解
渲染真實(shí)DOM的開銷很大，有時(shí)候我們修改了某個(gè)數(shù)據(jù)，直接渲染到真實(shí)dom上會(huì)引起整個(gè)dom樹的重繪和重排。我們希望只更新我們修改的那一小塊dom，而不是整個(gè)dom，diff算法就幫我們實(shí)現(xiàn)了這點(diǎn)。diff算法的本質(zhì)就是：找出兩個(gè)對象之間的差異，目的是盡可能做到節(jié)點(diǎn)復(fù)用2022-12-12
js 三級關(guān)聯(lián)菜單效果實(shí)例
這篇文章介紹了js 三級關(guān)聯(lián)菜單效果，有需要的朋友可以參考一下2013-08-08
Map對象在JavaScript中提供了一種靈活且高效的鍵值對存儲(chǔ)方式,它具有許多實(shí)用的方法,如set()、get()、has()和delete()等,使得操作和管理鍵值對變得更加簡單,這篇文章主要介紹了JS中map屬性,需要的朋友可以參考下2024-08-08