Google Chromeでfabric.textboxが機能していませんか？

Question

私はテキストボックス内のすべてのテキストを削除していますが、バックスペースを使用して各文字を削除しています。すべての文字をもう一度削除しても、入力中ですがブロックされています。

Answer 1

data URI（またはデータURL）は、小さなファイルのデータを含む文字列で、接頭辞はdata:であり、ファイルのMIMEタイプです。
バイナリデータの場合、ファイルはURI規則と互換性のある形式ですべてのバイトを表すことができるように、しばしばbase64に変換されます。

Blobコンストラクタは、結果のBlobに追加されるデータのリストを第1引数として想定しています。

ここでは、dataURIから直接BLOBを作成しようとしています。これは、ファイルがdata:image/png;base64,iVB0Rw0...を文字通りtext/plainとして保持することを意味します。

TextEditorで結果ファイルを開くことで確認できます。これは作成したテキストファイルなので

var blob = new Blob([c.toDataURL()], {type: 'image/png'}); 
 
var f = new FileReader(); 
 
f.onload = function(){console.log(f.result)}; 
 
f.readAsText(blob);

<canvas id="c"></canvas>

何が欲しいのは、あなたのBlobにそれを追加する前に、このdataURIに含まれるデータを抽出することです。

var dataURI = c.toDataURL(); 
 
fetch(dataURI) 
 
.then(r=>r.blob()) 
 
.then(blob=>{ 
 
    // here blob is a good old png file 
 
    var f = new FileReader(); 
 
    f.onload = function(){console.log(f.result)}; 
 
    f.readAsText(blob); 
 
});

<canvas id="c"></canvas>

あなたは、古いブラウザ用にXMLHttpRequest.responseType = 'ブロブ' と同じことを達成することができます

簡単な解決策が利用可能な場合、取得APIを使用することです。

ただし、非同期性が気に入らない場合は、最初にdataURIヘッダーを削除してから手動で変換してから、base64データをデコードし、正しいバイト値でUint8Arrayに渡すこともできます。

var dataURI = c.toDataURL(); 
 

 
var byteString = atob(dataURI.split(',')[1]); 
 
var arr = new Uint8Array(byteString.length); 
 
for (var i = 0; i < byteString.length; i++) { 
 
    arr[i] = byteString.charCodeAt(i); 
 
} 
 
var blob = new Blob([arr]); 
 

 
var f = new FileReader(); 
 
f.onload = function(){console.log(f.result)}; 
 
f.readAsText(blob);

<canvas id="c"></canvas>

そして、私は間違っていない場合は、このメソッドを持っていない、まだfabricjsので、私は、およそHTMLCanvasElement.toBlob()まだ話をしていないことに注意してください、しかし、あなたが使用していない場合multiplierオプション、これが最適なソリューションです。