I have stored an image in a scrambled type of form on the server, which I then display to the user. I would like to use Javascript to dynamically descramble the image on the client side.

Are there ways to do this? I think I need some way to manipulate the image as a binary object to descramble it.

I have stored an image in a scrambled type of form on the server, which I then display to the user. I would like to use Javascript to dynamically descramble the image on the client side.

Are there ways to do this? I think I need some way to manipulate the image as a binary object to descramble it.

• javascript
• image

3 Answers 3

You could base64 scramble and descramble it with JavaScript and then get the resulting base64 and insert it into an img tag in your html:

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

However your scrambling algorithm is still available to the user - as much as you hide it or minify it, an expert JS programmer can understand what's happening no matter what.

You could use a canvas.

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

load an image and draw it in 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 methods of the context to manipulate the image :

https://developer.mozilla/en/canvas_tutorial

You could copy the pixel data into canvas and manipulate it there. There's a solid answer available here: Get image data in JavaScript?