Question

我需要有关html / javascript图片问题的建议。似乎无法加载pnm类型的图像。我使用Chrome，Internet Explorer和Firefox测试了以下示例代码。它总是会产生同样的问题。加载并正确显示jpg，png等类型的图像。对于pnm类型的图像，图像的onload函数永远不会被调用。因此我假设无法加载此图像类型。

pnm类型的图像描述为：image / x-portable-anymap; base64

请看这段代码：

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader();
oFReader.onload = function (oFREvent) {
  console.log("image now loading");
  document.getElementById("uploadPreview").onload = function() { console.log("image successfully loaded");};
  document.getElementById("uploadPreview").src = oFREvent.target.result;
    };
function loadImageFile() {
  console.log("image selected");
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body>
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>
    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

我对这种行为感到好奇，因为pnm是最简单，最直接的图像格式。它只包含大小和像素数据。

有人知道如何更改示例代码以使其适用于pnm图像吗？

第一个价格是代码更改。第二个价格免费的浏览器插件。我只是不想使用额外的库或第三方代码。任何代码更正，无论计算密集程度如何，都受到欢迎。

Html / Javascript图像不采用pnm类型的图像

0 个答案: