Read thumbnail image taken from phone camera

Question

I need to take an image with the phone camera, read the original captured image, show the captured image thumbnail on the screen, and do some image manipulation on the thumbnail image. I managed to read the original image taken from my Android device with the help of http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-references

now I want to get the thumbnail as image variable and copy it to a canvas and do image manipulation on the canvas. because the original image is too big, when I show It on the canvas I'm getting huge canvas, so I thought to do it on the thumbnail image. I tried here - http://www.jasny.net/articles/jasny-bootstrap-file-upload-with-existing-file/ but didn't managed to get a reference to the thumbnail in my javascript code? my HTML5 code:

     <div class="fileupload fileupload-exists" data-provides="fileupload" data-name="myimage">
                      <div class="fileupload-new thumbnail" style="width: 200px; height: 350px;"><img src="images/image.gif" id="selected-image" /></div>
                      <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 350px; line-height: 20px;">
                        <img class="img-responsive" id="my-image" src="images/image.gif" />
                      </div>
                      <div>
                            <span class="btn btn-file btn-link btn-sm btn-default">                                  
                                <input type="file" id="files" name="files[]" multiple />                                
                            </span><a id="remove-button" href="#" class="btn btn-sm fileupload-exists" data-dismiss="fileupload"
                               >Remove</a>
                        </div>  
                    </div>

Answer 1

http://jsbin.com/jadujuyu/1/

Working example with latest bootstrap and jasny, your example is built with bootstrap 2.X.

Answer 2

After reading the image.

        var img = new Image;
        img.src = capturedImage;
        var ctx = imageCanvas.getContext('2d');            
        ctx.drawImage(img, 0, 0,canvas.width,canvas.height);

Just need to add the resize params to canvas drawImage