如何在JavaScript中获取文件api图像大小？

Question

I have:

if(window.FileReader) {
    reader = new FileReader();
    var sendingcontext = sendingcanvas.getContext('2d');
    reader.onload = (function(theFile) { 
    var image = new Image();
    image.src = theFile.target.result;

    image.onload = function() {
    sendingcanvas.width=this.width;
    sendingcanvas.height= this.height;
    console.log("height: " + sendingcanvas.height + " width: " + sendingcanvas.width)
         sendingcontext.drawImage(image, 0,0);
    };
        });
        reader.onloadend = function(e){
        showUploadedItem(e.target.result, file.fileName);
    }
    reader.readAsDataURL(file);
    alert(sendingcanvas.toDataURL());
}

I Suppose I don't have to explain what the code does, But what I want is to get the file api image height and width, set it to sendingcanvas and send it to server using ajax by using it's toDataURL() . I know This is weird but If I remove the alert(sendingcanvas.toDataURL()) from my script My server receives an empty image but If I have it in my script In my server the image is exactly how the client have it.

Thanks for everything.

Answer 1

You can try let the image in a <img> tag and get the real width and size of the image in case what you having a DOM:

 var height = $( "#main-reference" ).get( 0 ).naturalWidth; var width = $( "#main-reference" ).get( 0 ).naturalHeight; 

this property gives you the real height and width of the img although you have broken the img with css

Answer 2

Just want to point out that the image you are uploading is being converted to a png (if that is what you want)
The uploaded file is no longer the same as the user selected

Btw, sending a blob is better then uploading a base64 string that is ~3x larger you can use this polyfill to get support for canvas.toBlob(...) in older browsers

This is basicly what you are doing:

 function showUploadedItem(image){ document.body.appendChild(image) } // Simulate a file (image) var black_1x1 = new Uint8Array([71,73,70,56,57,97,1,0,1,0,128,0,0,5,4,4,0,0,0,44,0,0,0,0,1,0,1,0,0,2,2,68,1,0,59]) var file = new Blob([black_1x1], {type:"image/gif"}) console.log(file) var img = new Image img.onload = function() { console.log("height: " + this.height + " width: " + this.width) var canvas = document.createElement('canvas') var ctx = canvas.getContext('2d') canvas.width = this.width canvas.height = this.height showUploadedItem(this) ctx.drawImage(this, 0, 0) canvas.toBlob(function(blob){ console.log(blob) // Send the canvas pic to server (using fetch, xhr or jQuery // With or without FormData // fetch('/upload', {method: 'post', body: blob}) }) } // No need to use fileReader + base64 img.src = URL.createObjectURL(file) 

 /* Just to make the pixel more vissible */ body img { width: 10px } 

 <!-- toBlob polyfill --> <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>