0

I am a new user and cannot comment on this post: dragging and resizing an image on html5 canvas regarding drag and drop/resize image with anchors...

could someone please clarify how to apply the resize/drag/anchors to an uploaded image rather than a pre-loaded image please?

I have had a go but its killing me.. 

uploader html:
<input type="file" id="imageLoader" name="imageLoader" />

uploader js:
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, 200, 140);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

fiddle

Community
  • 1
  • 1
user3535811
  • 51
  • 8

1 Answers1

2

your code is written to handle the global var img.
When you load a new image, a new local img var is created, which you only draw on the context.
What you need is to have the new image replace the old one.
So just change, in your file loader :

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        img = new Image();               // not 'var img=...'
        img.onload = function () {
            draw(true,true);             // just update your app
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

it workd, as you can see here :
http://jsfiddle.net/LAS8L/108/

GameAlchemist
  • 18,995
  • 7
  • 36
  • 59
  • super... thanks for your help (and speedy reply!!) :D – user3535811 Apr 15 '14 at 12:51
  • input text is cleared on image load and mousedown, I know its a different question for a different post but maybe its a simple fix? would appreciate help with that too.. – user3535811 Apr 15 '14 at 12:55
  • http://jsfiddle.net/LAS8L/109/ i've put the text draw in a function that is called on text change and on a new draw. – GameAlchemist Apr 15 '14 at 13:03
  • genius!.. loads more bugs for me to fix, like loading no image to begin with and other text effects but i wont abuse the forum by going off the original topic... massive thanks for your input @GameAlchemist :D – user3535811 Apr 15 '14 at 13:07
  • Again you're welcome !! You are on the right path anyway. Beware that your baby is growing big, so you should refactor it to have clear separation of concerns and much less globals. Good luck ! – GameAlchemist Apr 15 '14 at 13:17
  • i mean reduce the number of global vars, have functions to work only with their arguments, separate the parts of the code, ... all this could make room, for instance, to multiple images handling. See here what i've done to illustrate here : http://jsfiddle.net/LAS8L/111/ – GameAlchemist Apr 15 '14 at 16:30
  • thats more manageable, thank you... I have updated so there is no image to begin with and scaled to 200x140 on upload... its almost there, Im going to add text styling options too... could you help with applying drag/resize to the keyup text?? – user3535811 Apr 15 '14 at 16:51
  • if you let me know of a fiddle that merges your efforts with mine, i'll have a look. – GameAlchemist Apr 15 '14 at 17:35
  • I changed "#words" to "#textBox". I have added .js above yours and added text face and colour option and now none of its working.. http://jsfiddle.net/LAS8L/115/ – user3535811 Apr 15 '14 at 18:00