nederlander
New Member
IntroAt the moment, I have an appjs drawing application using Raphaeljs.I use a custom drag/drop upload extension to upload a background image. This image is displayed after uploading in a canvas.This drawing you can export and import.But when I import the background in the canvas, sometimes I get a 1/3 image, sometimes 2/3 and sometimes the whole image.There is no order of these size bugs. Sometimes I have 5 times the 1/3 image.I am testing my application with images from 400x280 to 4000x4000. The width is always loaded correctly. Only the height has this unreliable bug with loading.Even \[code\]image.complete\[/code\] is always \[code\]true\[/code\].What I haveServer\[code\]window.showBackground('uploads/thankyou.png')\[/code\]Client\[code\]window.showBackground = function(imagePath) { var image = new Image() image.onload = function() { console.log(image.complete) // Output: true width = image.width height = image.height $('#main').html($('<canvas id="background" width="'+width+'" height="'+height+'"></canvas>')) var canvas = $('#background')[0] var context = canvas.getContext("2d") context.drawImage(image, 0, 0) paper = Raphael($('#main')[0], width, height) } image.src = http://stackoverflow.com/questions/15874584/imagePath} \[/code\]Mostly I get this background
Very often this one appears
But I want this one ALWAYS
Anyone know how I can fix this unreliable bug?