JavaScript：base64をバイナリデータにデコード

Question

ビデオからキャンバスを使用してイメージを作成しようとしていますが、イメージをAPIに送信しようとしています。

これは私のコードである（大部分は簡潔にするために省略されている）

 var image = new Image(); 
     image.src = canvas.toDataURL("image/png"); 

     var newFile = new File([atob(image.src)], lorem.png, { 
     type: "image/png", 
      lastModified: Date.now() 
     }) 

image.srcは、フォーマットBASE64データであると思われる長い文字列である：画像/ PNG、BASE64

[データへのリンク] [1]：https://gist.github.com/anonymous/d357e780fa60b2c47490a9f795e34acf

私は ATOB機能とバイナリにデータを解読しようとすると、私は次のエラーを取得：

を

Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Base64データのどの部分が正しくフォーマットされていないかはわかりません。

Answer 1

データURLの先頭を切り捨てる必要があります。 image.srcに画像を置くと、その内容はdata:image/png;base64,BASE64ENCODEDSTUFFのようになります。 Obobviously data:image/png;base64はbase64ではないので、atobでそれをデコードすると失敗します。

Answer 2

data-uriはヘッダーとそれに続くBase-64データで構成されているため、atob（）はBase-64部分のみを処理できます。つまり、ヘッダ（ "data：image/png; base64"）を切り捨てる必要があります。

しかし、Data-URI経由で行くのは遅く、必要以上に多くのメモリを消費します。ブロブを直接使用する - これは方法です：

var img = new Image(); 

canvas.toBlob(function(blob) { 
    var newFile = new File([blob], "lorem.png", {type: "image/png"}); 
    img.src = (URL || webkitURL).createObjectURL(blob); 
    // ... 
});