Question

我正在删除文本框中的所有文本，或者我正在使用退格键删除每个字母。再次删除所有字母后我正在键入但是它已被阻止。它不允许移动。

Answer 1

data URI（或数据URL）是一个字符串，其中包含一个小文件的数据，前缀为data:方案和文件的MIME类型。
对于二进制数据，该文件通常转换为base64，以便能够以与URI规则兼容的格式表示所有字节。

Blob构造函数需要将第一个参数作为将附加在生成的Blob中的数据列表。

在这里，您尝试直接从dataURI创建Blob，这意味着您的文件将以文本/普通方式保存data:image/png;base64,iVB0Rw0...。

您可以通过在TextEditor中打开生成的文件来检查这一点，因为是的，这只是您创建的文本文件。

＆＃13;

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

＆＃13;

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

＆＃13;

您想要的是提取此dataURI中包含的数据，然后将其附加到您的Blob。

易用的解决方案是使用Fetch API：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

您可以使用XMLHttpRequest.responseType =＆＃39; blob＆＃39;对于旧浏览器。

但是如果你不喜欢异步性，你也可以手动转换它，先删除dataURI标题，然后解码base64数据并用正确的字节值输入Uint8Array。

＆＃13;

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);

＆＃13;

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

＆＃13;

请注意我还没有谈到HTMLCanvasElement.toBlob()，因为如果我没弄错的话，fabricjs仍然没有这种方法，但是如果你不是这样的话。使用multiplier选项，这将是最佳解决方案。

fabric.textbox不适用于谷歌浏览器？

1 个答案: