JS實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64示例詳解
背景介紹
最近有個(gè)需求是將部分DOM生成圖片上傳到服務(wù)器，這里就直接用之前項(xiàng)目使用的 html-to-image。
然而，這次與上次不同的是有一個(gè)圖片；其實(shí)，html-to-image也支持了存在圖片的DOM生成截圖(embed-images)。
出現(xiàn)意外
不出意外的就該出意外了：
很容易理解，就是跨域了請(qǐng)求了。注意，這里本來(lái)之前使用img標(biāo)簽是能正常請(qǐng)求的，并且也不用加crossorigin屬性。 在調(diào)用html-to-image中加上mode: 'no-cors'依然不行。
進(jìn)入正題吧
然后就想自己搞轉(zhuǎn)base64吧，各種百度谷歌出來(lái)了
const image2Base64 = (url: string) => new Promise((resolve, reject) => {
if (!url) {
resolve('');
return;
}
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = url;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx?.drawImage(img, 0, 0);
const data = canvas.toDataURL();
resolve(data);
};
img.onerror = () => {
reject('');
};
});
特別需要注意的是：img標(biāo)簽屬性是crossorigin，new Image需使用crossOrigin。 如果不設(shè)置crossOrigin會(huì)造成另一個(gè)問(wèn)題：
在用canvas調(diào)用toDataURL方法中出錯(cuò)了。
然后又是各種百度谷歌，發(fā)現(xiàn)MDN有個(gè)權(quán)威又無(wú)語(yǔ)的解釋：
提煉一下哈：指定crossorigin的圖像，在canvas調(diào)用中不會(huì)出現(xiàn)tainted錯(cuò)誤。
其實(shí)上面已經(jīng)能解決大多數(shù)的問(wèn)題了：
對(duì)，沒(méi)猜錯(cuò)，事情沒(méi)有絕對(duì)的，還是有個(gè)例的：
不知是這個(gè)圖片服務(wù)器咋設(shè)置的，各種吧啦吧啦溝通也不給設(shè)置跨域白名單啥的，只能自己想辦法了。
nodejs中間層轉(zhuǎn)
const http = require('http');
http.get(url, (res) => {
const chunks = [];
let size = 0;
res.on('data', (chunk) => {
chunks.push(chunk);
size += chunk.length;
});
res.on('end', () => {
const data = Buffer.concat(chunks, size);
const base64Data = data.toString('base64');
return base64Data;
});
});
結(jié)果，完美解決。
總結(jié)
- 使用crossOrigin能解決大多數(shù)情況
- 如果能在圖片服務(wù)器加跨域白名單最好
- 終極大招就是nodejs轉(zhuǎn)
- nodejs弊端：對(duì)于圖片無(wú)法使用CDN，對(duì)服務(wù)器壓力增大，慎用
以上就是JS實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JS圖片URL轉(zhuǎn)base64的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
echart實(shí)現(xiàn)大屏動(dòng)效示例詳解
這篇文章主要為大家介紹了echart實(shí)現(xiàn)大屏動(dòng)效示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Parcel配置public靜態(tài)文件目錄過(guò)程解析
這篇文章主要為大家介紹了Parcel配置public靜態(tài)文件目錄實(shí)現(xiàn)過(guò)程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了vscode工具函數(shù)once使用示例深入剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序 網(wǎng)絡(luò)API發(fā)起請(qǐng)求詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)API發(fā)起請(qǐng)求詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11
編寫(xiě)微信小程序時(shí)，用到 wx.uploadFile，用來(lái)上傳圖片＋文本信息，本篇文章主要介紹了微信小程序 wx.uploadFile 的編碼坑，有興趣的可以了解一下。2017-01-01
微信小程序 詳解下拉加載與上拉刷新實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 詳解下拉加載與上拉刷新實(shí)現(xiàn)方法的相關(guān)資料,這里介紹了兩種實(shí)現(xiàn)方法，需要的朋友可以參考下2017-01-01
next.js源碼解析getStaticProps?getStaticPaths使用場(chǎng)景
這篇文章主要為大家介紹了next.js源碼解析getStaticProps?getStaticPaths使用場(chǎng)景,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了JS前端操作 Cookie源碼示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
JavaScript中使用toLocaleString數(shù)字格式化處理詳解
這篇文章主要為大家介紹了JavaScript中使用toLocaleString數(shù)字格式化處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JavaScript 數(shù)組用于在單一變量中存儲(chǔ)多個(gè)值，數(shù)組是一種特殊的變量，它能夠一次存放一個(gè)以上的值。下面文章小編就來(lái)詳細(xì)歸納一下JavaScript數(shù)組,需要的朋友可以參考一下2021-09-09