CODEWITHSUNDEEP
javascriptimage
foobarfuzzbizz
foobarfuzzbizz

Reputation: 58637

How can I manipulate an image using Javascript?

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.

Upvotes: 3

Views: 11295

Answers (3)

Luca Matteis
Luca Matteis

Reputation: 29267

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.

Upvotes: 3

nico
nico

Reputation: 103

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.org/en/canvas_tutorial

Upvotes: 2

Shakakai
Shakakai

Reputation: 3554

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

Upvotes: 1

Related Questions