How can I manipulate the image using javascript?

Question

I saved the image in a scrambled form of the form on the server, which I then show to the user. I would like to use Javascript to dynamically decrypt the image on the client side.

Are there any ways to do this? I think I need to somehow manipulate the image as a binary object in order to descramble it.

Answer 1

You can scramble base64 and decrypt it using JavaScript, and then get the resulting base64 and paste it into the tag imgin your html:

<img alt="Embedded Image" 
   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

- - , JS- , , .

Answer 2

. : JavaScript?

Answer 3

You can use canvas.

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

upload the image and draw it on the canvas:

var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'toto.jpg';

and then you can use context methods to control the image:

https://developer.mozilla.org/en/canvas_tutorial