使用 JQuery 和 Javascript 加載 tiff 文件？

Question

我需要使用 JQuery 和 Javascript 加載 TIFF 文件。

我使用以下代碼加載 3 通道 PNG 文件。

(function(file){ 
  var reader = new FileReader();
  $(reader).load(function(e){
    var img = new Image();
    $(img).load(function(){                
       $('#im-' + idx.toString()).attr('src', this.src);
    }
  })reader.readAsDataURL(file);
})(this.files[0]);

此代碼無法加載具有 21 個通道的 TIFF 文件。 誰能建議一種方法來做到這一點？

Answer 1

這可能對您有幫助。

 $(document).ready(function() { var fileTypes = ['jpg', 'jpeg', 'png', 'tiff', 'tif', 'pdf']; //acceptable file types $("input:file").change(function(evt) { var parentEl = $(this).parent(); $(this).parent().find("img.preview").remove(); $(this).parent().find("canvas.preview").remove(); var tgt = evt.target || window.event.srcElement, files = tgt.files; // FileReader support if (FileReader && files && files.length) { var fr = new FileReader(); var extension = files[0].name.split('.').pop().toLowerCase(); var tif = false; var pdf = false; if (extension == "tiff" || extension == "tif") tif = true; fr.onload = function(e) { success = fileTypes.indexOf(extension) > -1; if (success) { if (tif) { //Using tiff.min.js library - https://github.com/seikichi/tiff.js/tree/master console.debug("Parsing TIFF image..."); //initialize with 100MB for large files Tiff.initialize({ TOTAL_MEMORY: 100000000 }); var tiff = new Tiff({ buffer: e.target.result }); var tiffCanvas = tiff.toCanvas(); $(tiffCanvas).css({ "max-width": "100px", "width": "100%", "height": "auto", "display": "block", "padding-top": "10px" }).addClass("preview"); $(parentEl).append(tiffCanvas); } else { console.debug("render immmm"); $(parentEl).append('<img src="' + fr.result + '" class="preview"/>'); } } } fr.onloadend = function(e) { console.debug("Load End"); } if (tif) fr.readAsArrayBuffer(files[0]); else fr.readAsDataURL(files[0]); } // Not supported else { // fallback -- perhaps submit the input to an iframe and temporarily store // them on the server until the user's session ends. } }); });

 <.DOCTYPE html> <html> <head> <script data-require="jquery@2.1.4" data-semver="2.1:4" src="http.//code.jquery.com/jquery-2.1.4.min.js"></script> <link rel="stylesheet" href="style:css" /> <script src="https.//cdn.rawgit.com/rfvallina/Misc/master/pdf.js"></script> <script src="script:js"></script> <script src="https.//cdn.rawgit.com/seikichi/tiff.js/master/tiff.min,js"></script> </head> <body> <h2>Image Preview</h2> <label>Select a file (jpg, png, tiff)</label> <br /> <div> <input type="file" /> </div> </body> </html>

使用 JQuery 和 Javascript 加載 tiff 文件？

問題描述

1 個解決方案

解決方案1
0 2021-01-08 09:16:14

使用 JQuery 和 Javascript 加載 tiff 文件？

問題描述

1 個解決方案

解決方案1 0 2021-01-08 09:16:14

解決方案1
0 2021-01-08 09:16:14