Canvas.toDataURL 用不了咋辦？
base64 輸出)，但是在某個(gè)環(huán)境下，Canvas.toDataURL 這個(gè)接口返回的數(shù)據(jù)是錯(cuò)誤的。Canvas.toDataURL ，生成 base64 字符串。readPixels() 能讀到位圖的像素信息。輸入： data: Uint8Array位圖信息 和 圖片寬高。輸出：帶有圖片信息的 base64字符串。(可將該字符串放瀏覽器中的地址欄，會(huì)返回一張圖片)
像素?cái)?shù)據(jù) -> 轉(zhuǎn) JPG數(shù)據(jù) -> 轉(zhuǎn)base64
JPG 格式？按照廠里的方法，應(yīng)該去了解其文件格式如何生成，需要什么頭文件信息，關(guān)于JPEG相關(guān)內(nèi)容可參考wiki :github 中找到了前人留下的輪子。JavaScript 的代碼，白玉無(wú)冰這里操作的是直接拷貝出來(lái)，放到一個(gè) TypeScript 代碼中，導(dǎo)出 encodeJPG 方法。
jpeg-js 中的實(shí)例代碼，組織一下，很快就生成了 JPEG 的數(shù)據(jù)。
JPEG 的數(shù)據(jù)中 Uint8Array 轉(zhuǎn) base64。
// 這樣我們就能從 RenderTexture 中獲取到數(shù)據(jù)了
let data = texture.readPixels();
let width = texture.width;
let height = texture.height;
// 接下來(lái)翻轉(zhuǎn)y的數(shù)據(jù)
const flipYData = new Uint8Array(width * height * 4);
let rowBytes = width * 4;
for (let row = 0; row < height; row++) {
let startRow = height - 1 - row;
let start = startRow * width * 4;
for (let i = 0; i < rowBytes; i++) {
flipYData[row * width * 4 + i] = data[start + i];
}
}
// 準(zhǔn)備生成 jpegImageData
const rawImageData = {
data: flipYData,
width: width,
height: height,
};
const jpegImageData = encodeJPG(rawImageData, 50);
// jpeg -> base64
function uint8ToString(buf) {
var i, length, out = '';
for (i = 0, length = buf.length; i < length; i += 1) {
out += String.fromCharCode(buf[i]);
}
return out;
}
const base64 = btoa(uint8ToString(jpegImageData.data));
cc.warn('base64', "data:image/jpg;base64," + base64);
完整代碼工程：
https://github.com/baiyuwubing/cocos-creator-examples/tree/master/2.4.x/assets/demo06
以上為白玉無(wú)冰使用 Cocos Creator 2.4 實(shí)現(xiàn) "截圖生成 base64" 的過(guò)程分享，點(diǎn)擊【閱讀原文】發(fā)現(xiàn)更多白玉無(wú)冰實(shí)用教程。
往期精彩
評(píng)論
圖片
表情