Question

我正在尝试将.tif文件加载到HTML5画布上。经过一些研究，我发现我可以使用FileReader来做到这一点。我下面的大多数代码来自http://www.nczonline.net/blog/2012/05/15/working-with-files-in-javascript-part-2/。不幸的是，以下测试页面在.tif文件（它适用于其他图像文件）上失败，在Firefox和Chrome中说“图像无法加载”（让我们忽略IE进行此测试）。我错过了什么吗？

<!doctype html>
<html>
  <body>
    <input type="file" onchange="loadFile(event)"><br>
    <canvas id="myCanvas" width="100" height="100" style="border:1px solid #000; margin:10px"></canvas>
    <script>
    function loadFile(e) {
      var file = e.target.files[0];

      var reader = new FileReader();
      reader.onload = function(event) {
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var dataUri = event.target.result,
              img = new Image();

          // wait until the image has been fully processed
          img.onload = function() {
               context.drawImage(img, 0, 0);
          };
          img.onerror = function () {
               console.error('Image could not load.');
          }
          img.src = dataUri;
      };

      reader.onerror = function(event) {
          console.error("File could not be read. Code " + event.target.error.code);
      };

      reader.readAsDataURL(file);
    }
    </script>
  </body>
</html>

将tiff文件加载到HTML5画布中

0 个答案: