11474

FileReader+canvas image loading problem

I am traing to load some images on client browser with this code:

function addFiles() var input = document.querySelector("input[type='file']"); var files = input.files; var previewEl = document.getElementById("preview"); for (var i = 0; i < files.length; i++) { if (!files[i].type.match(/image.*/)) { alert("This is not image!"); continue; }; var divEnvelop = document.createElement('div'); divEnvelop.setAttribute('class','imgPrevEnvelop'); divEnvelop.setAttribute('id',"img"+i); previewEl.appendChild(divEnvelop); var img = document.createElement("img"); img.file = files[i]; var reader = new FileReader(); reader.onload = (function(aImg, aName, aEnvelop) { return function(e) { aImg.src = e.target.result; //here I don't have img.width - problem createImgCanvas(aImg, aImg.width, aImg.height, 300, 300, aName, aEnvelop); }; })(img,files[i].name, divEnvelop); reader.readAsDataURL(files[i]); } } function createImgCanvas(img, imgWidth, imgHeight, width, height, label, divEnvelop) { if (imgWidth > imgHeight) { if (imgWidth > width) { imgHeight *= width / imgWidth; imgWidth = width; } } else { if (imgHeight > height) { imgWidth *= height / imgHeight; imgHeight = height; } } var canvas = document.createElement('canvas'); canvas.setAttribute('id',label); canvas.width = imgWidth; canvas.height = imgHeight; var imageCanvas2D = canvas.getContext("2d"); try{ imageCanvas2D.drawImage(img, 0, 0, imgWidth, imgHeight); } catch(err) { alert(err);} divEnvelop.appendChild(canvas); }

but there is problem in reader.onload function, wher I don't have img.width property. Is still set to zero. This behaviour is in chrome too, so it will be probably my fault. Could you say me, where is the problem please?

Thanks, JV

Answer1:

I haven't worked with the FileReader object yet, however, as far as I can tell, the problem is the following: After you assigned a value to img.src the image is not instantly available. It has to be loaded first - at least that is how it is if you work with remote files. The img element will fire an onload event, as soon as the image is done loading. I assume this is also true if you assign a data url. You should listen for this event and call your createImgCanvas from there.

Recommend

  • Programatic access of a hash element
  • Compare String with Strings in array
  • iPhone Day Calendar View?
  • Twig / Symfony 2.3.4: Extending twig template stored in database
  • custom CSS code for DiscordApp
  • Spark: long delay between jobs
  • Dynamically rendered UI: how to delete old reactive variables on second run
  • Is fluent NHibernate ready for production code?
  • When Does The JDK Compile Version Matter?
  • Which files are responsible specifically for Model, View and Controller in struts2 MVC framework? [d
  • Can I bring back old __tostring() behaviour in PHP 5.3?
  • ZipArchive extraction - single file
  • Gaining access to the SVG DOM in Chrome and Safari through Javascript
  • Session management in GWT client side
  • Creating a layer of gradient within an SVG path dynamically
  • react native create element with string
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • How does document.ready work with angular element directives?
  • How to use JavaScript to determine whether a file exists in a directory?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Functions in global context
  • Python urlparse: small issue
  • why do I get the error when installing the gem 'pg'? [duplicate]
  • Why value captured by reference in lambda is broken? [duplicate]
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Change an a tag attribute in JavaScript based on screen width
  • Compare two NSDates in iPhone
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Java static initializers and reflection
  • Change div Background jquery
  • How to stop GridView from loading again when I press back button?
  • python draw pie shapes with colour filled
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app