简体   繁体   中英

Load a tiff file using JQuery and Javascript?

I have a requirement to load a TIFF file using JQuery and Javascript.

I use the following code to load a 3-channel PNG file.

(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]);        

This code is not able to load the TIFF file which has 21 channels. Could anyone suggest a way to do this?

This might be helpful to you.

 $(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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM