您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JS怎么實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JS怎么實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64”吧!
最近有個需求是將部分DOM生成圖片上傳到服務(wù)器,這里就直接用之前項(xiàng)目使用的 html-to-image。
然而,這次與上次不同的是有一個圖片;其實(shí),html-to-image也支持了存在圖片的DOM生成截圖(embed-images)。
不出意外的就該出意外了:
很容易理解,就是跨域了請求了。注意,這里本來之前使用img標(biāo)簽是能正常請求的,并且也不用加crossorigin屬性。 在調(diào)用html-to-image中加上mode: 'no-cors'依然不行。
然后就想自己搞轉(zhuǎn)base64吧,各種百度谷歌出來了
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會造成另一個問題:
在用canvas調(diào)用toDataURL方法中出錯了。
然后又是各種百度谷歌,發(fā)現(xiàn)MDN有個權(quán)威又無語的解釋:
提煉一下哈:指定crossorigin的圖像,在canvas調(diào)用中不會出現(xiàn)tainted錯誤。
其實(shí)上面已經(jīng)能解決大多數(shù)的問題了:
對,沒猜錯,事情沒有絕對的,還是有個例的:
不知是這個圖片服務(wù)器咋設(shè)置的,各種吧啦吧啦溝通也不給設(shè)置跨域白名單啥的,只能自己想辦法了。
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; }); });
到此,相信大家對“JS怎么實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。