如何在不使用HTML5 Canvas的情況下將base64 dataUri轉換爲Uint8ClampedArray？

我正在開發一個項目，我需要將base64 dataUri轉換爲Uint8ClampedArray而不使用HTML5 Canvas。這是我想出的，但我認爲Uint8ClampedArray不代表像素表。如何在不使用HTML5 Canvas的情況下將base64 dataUri轉換爲Uint8ClampedArray？

function dataUri2Array(uri){ 
    b64 = uri.slice(uri.indexOf(',')+1); 
    str = atob(b64); 
    arr = str.split('').map(function (e) {return e.charCodeAt(0);}); 
    u = new Uint8ClampedArray(arr); 
    return u; 
},

來源

2014-09-03 Pooja Patel

您必須在地圖（）中填充數組，但不能一次全部填充... – dandavis 2014-09-03 18:30:25

只需使用html5畫布 - 它不會咬你。 – markE 2014-09-03 18:42:47

@dandavis請你詳細說明一下嗎？可能有幾行代碼？ – 2014-09-03 18:43:13

既然你不想使用Canvas，你需要實現編碼/用於各種圖像類型的解碼自己。你的代碼看起來是這樣的：

function dataUri2Array(uri){ 
    b64 = uri.slice(uri.indexOf(',')+1); 
    type = getImageType(uri); // * 
    data = atob(b64); 
    switch (type) { 
    case "jpeg": 
     arr = decodeJpeg(data); 
     break; 
    case "gif": 
     arr = decodeGif(data); 
     break; 
    case "png": 
     arr = decodePng(data); 
     break; 
    default: 
     break; 
    } 
    u = new Uint8ClampedArray(arr); 
    return u; 
}

的getImageType(uri)功能和所有decodeX(data)功能需要實現。以下是一些可能有所幫助的庫：jpeg-js,node-pngjs,bmp-js等。從任意數據獲取像素數組是非平凡的，特別是在處理非原始類型時（即BMP）。

如果你想自己寫解壓縮器，Wiki page可能是一個很好的介紹，但我也建議閱讀Shannon-Fano和其他類型的編碼方法來熟悉這個概念。

我希望你有一個很好的理由不使用Canvas。

來源

2014-09-03 18:58:27

如何在不使用HTML5 Canvas的情況下將base64 dataUri轉換爲Uint8ClampedArray？

回答

相關問題