crop and watermark an image uploaded in html

Question

I want to Create a piece of code which allows a user to upload an image and immediately display it, cropped, and with a water marker overtop of it which they can right click and save. Im wanting to use java/html to make this uploadable online. So far this code enables me to upload and display a photo without any cropping or watermark. I want this to be saveable, so using html to simply put a photo ontop of the image wont work.

<input type='file' onchange="readURL(this);" />
    <img id="blah" class="watermark" src="#" alt="your image" />
 <script>
     function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width("100%")
                        .height("100%");
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

Answer 1

Use html canvas to work with images (crop, combine) on the client. You'll get image URI from a user, draw it on the canvas with your watermark, and then you'll be able to return it to user as image, or upload to the server as image.