在 Firefox 或 chrome 中获取 <img> 二进制文件而不发出新请求 [重复]

Posted 2023-03-15

【中文标题】在 Firefox 或 chrome 中获取 <img> 二进制文件而不发出新请求 [重复]

【英文标题】：get <img> binary in firefox OR chrome without making a new request [duplicate]

【发布时间】：2016-06-17 20:20:41

【问题描述】：

如何从已加载的 <img> 元素中获取二进制文件，在 firefox 或 chrome 中（我可以使用任何一种），而无需发出新请求来获取图像的新副本？ （正常的解决方案是new XMLHttpRequest 来获取新副本）这不是性能问题，我绝对不能再次请求获取图像的副本，我必须从缓存中加载它，而不提醒原始网站。我可以使用 javascript、npapi 或其他任何东西，只是不知道从哪里开始

【问题讨论】：

您可以查看这个答案 - ***.com/questions/934012/get-image-data-in-javascript 会有帮助吗？

@nstoitsev 天哪，是的！ - 我猜你可以把它作为答案发布

@nstoitsev per meta.***.com/questions/295672/… ，您可能可以复制代码以获得答案

我不知道。您的问题与我喜欢的问题非常相似，仅复制代码不会有问题。将类似的问题标记为这样也很好，因为如果有人偶然发现这个问题，他将能够参加另一个问题的讨论。

很公平，我想有人应该将此标记为重复、可能重复或类似的东西.. 不要指望我这样做，这是我没有获得的“特权”

【参考方案1】：

你可以使用FileReader.readAsBinaryString()

这里是 FileReader 版本，但是toBlob 方法有browser limitation：

var canvas = document.createElement('canvas');
var height = 200;
var width  = 200;
canvas.width  = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
var img = document.getElementById("img001");
ctx.drawImage(img, 0, 0);

canvas.toBlob(function (blob) 
  var reader = new FileReader();

  reader.onloadend = function () 
    console.log(reader.result);
  ;

  reader.readAsBinaryString(blob);
); 

demo

【讨论】：

在 元素上？如何？ var fd=new FileReader();fd.readAsBinaryString(document.getElementsByTagName("img")[0]);：未捕获的 TypeError：无法在“FileReader”上执行“readAsBinaryString”：参数 1 不是“Blob”类型。

FireReader 从浏览器的本地文件系统中读取。要使用它，您需要找到文件在本地缓存的位置，并且没有用于此的 Web API。