Javascript JS：如果没有XMLHttpRequest，如何对本地文件进行base64编码？

我正在尝试对本地文件进行base64编码。它在我的

.js

文件旁边，所以没有上传。像（使用

XMLHttpRequest

）这样的解决方案会出现跨站点脚本错误

我正在尝试类似的方法（这不起作用，但可能有助于解释我的问题）：

有没有人在本地有这样做的经验

解决方案，如（使用XMLHttpRequest）获取跨站点 脚本错误

如果使用chrome或chrome浏览器，则启动时可以使用

--允许从文件访问文件
标志设置，以允许使用
XMLHttpRequest（）
或
canvas.toDataURL（）
从本地文件系统请求资源

您可以使用
元素、
元素
.toDataURL（）
创建本地映像文件的
数据URL
，而无需使用
XMLHttpRequest（）

您也可以使用
XMLHttpRequest（）
，如中所述

另见


有关两种方法返回的
数据URI
差异的详细信息，请参阅

如下文@kaido所述

它将首先解码它，在这个阶段它仍然是你的文件，然后它
将它绘制到画布上（现在它只是原始像素），最后
将重新编码（它与原始文件无关
（更多）检查dataURI字符串。。。他们完全不同，而且
即使您从两个不同的浏览器执行画布操作，
您将有不同的输出，而
FileReader
将始终为您提供
同样的输出，因为它直接对文件编码，所以不解码
它

因此，您想在磁盘上对文件进行base64编码？这是使用nodejs还是在浏览器中？实际上，我认为画布解决方案也需要该标志，如果在画布上绘制了来自此协议的图像，那么阻止
file://
xhr的浏览器将污染画布。另外，请记住，此解决方法不会给出文件的精确表示，它将首先解码为原始位图，然后重新编码为您设置为
toDataURL（）的参数的任何内容。哦，在最近的示例中，您总是忘记设置画布的宽度和高度，在IMO中包含它们是一个好习惯。@kaido在
.toDataURL（）中包含
类型的设置。在问题和初始答案中遗漏了该部分。“如果不设置标志，它甚至不能解决实际问题，这一点也应该说清楚。”相信OP现在已经明白了这一点，因为返回的错误没有设置标志？@kaido更新为
image/jpg
让我们来看看。
var file = 'file.jpg'
var reader = new FileReader();
reader.onload = function(e) {
   var res = e.target.result;
   console.log(res);
};
var f = reader.readAsDataURL(file);

var file = "file.jpg";
var img = new Image;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.onload = function() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);
  var res = canvas.toDataURL("image/jpeg", 1); // set image `type` to `image/jpeg`
  console.log(res);
}
img.src = file;