Listing

The complete program is:

<script>
function augmentImageData(o) {
o.getPixel = function (x, y) {
var i = (x + y * this.width) * 4;
return {R: this.data[i],
G: this.data[i + 1],
B: this.data[i + 2],
A: this.data[i + 3]

}
}
o.setPixel = function (x, y, c) {
var i = (x + y * this.width) * 4;
this.data[i] = c.R;
this.data[i + 1] = c.G;
this.data[i + 2] = c.B;
this.data[i + 3] = c.A;
}
}

function createCanvas(h, w) {
var c = document.createElement("canvas");
c.width = w;
c.height = h;
return c;
}

function draw() {
var ctx = document.body.appendChild(
createCanvas(400, 400)).getContext("2d");
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, 400, 300);
var ImDat = ctx.getImageData(0, 0, 400, 300);
augmentImageData(ImDat);
for (var x = 0; x < 400; x++) {
for (var y = 0; y < 300; y++) {
var c1 = ImDat.getPixel(x, y);
var c2 = ImDat.getPixel(x, y + 3);
var r = Math.abs(c1.R - c2.R) + 128;
var g = Math.abs(c1.G - c2.G) + 128;
var b = Math.abs(c1.B - c2.B) + 128;
var grey = (r + g + b) / 3;
ImDat.setPixel(x, y,
{R: grey, G: grey, B: grey, A: c1.A});
}
}
ctx.putImageData(ImDat, 0, 0);
};

img.src = "test.jpg";
}
draw();
</script>


A security problem

If you try this program out you will probably find that it doesn't work. The reason is that we are loading an image from the local file system and this is a security risk. You cannot access the pixels of an image that has been loaded from a different URL and accessing pixels of a local file is particularly forbidden. If you download the file from a server with the same URL as the script then there's no problem.

To allow for testing, Chrome has a command line switch that turns off the security check - no doubt other browsers have similar features. All you have to do is locate the shortcut that you use to launch Chrome and change the target to read:

"C:\Program Files\Google\Chrome\Application\
chrome.exe"
--allow-file-access-from-files

Alternatively simply use the command from the command prompt or add:

--allow-file-access-from-files

to whatever command gets Chrome.

With this command line switch it all works and you can see the result of the effect. It is also worth saying that it runs remarkably fast for a JavaScript-based image processing routine.

[画像:embose]

If you would like the code for this project then you can find it in the CodeBin.

• Ian Elliot is the author of JavaScript Async; Just JavaScript: An Idiomatic Approach; Just jQuery: The Core UI and Just jQuery: Events, Async & AJAX which are part of the I Programmer Library published by I/O Press.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

[画像:largecover360]

Contents

1. JavaScript Graphics
2. Getting Started With Canvas
3. Drawing Paths
   Extract: Basic Paths
   Extract: SVG Paths
   Extract: Bezier Curves
4. Stroke and Fill
   Extract: Stroke Properties
   Extract: Fill and Holes
   Extract: Gradient & Pattern Fills
5. Transformations
   Extract: Transformations
   Extract: Custom Coordinates
   Extract Graphics State
6. Text
   Extract: Text, Typography & SVG
   Extract: Unicode
7. Clipping, Compositing and Effects
   Extract: Clipping & Basic Compositing
8. Generating Bitmaps
   Extract: Introduction To Bitmaps
   Extract : Animation
9. WebWorkers & OffscreenCanvas
   Extract: Web Workers
   Extract: OffscreenCanvas
   
10. Bit Manipulation In JavaScript
    Extract: Bit Manipulation
11. Typed Arrays
    Extract: Typed Arrays
12. Files, blobs, URLs & Fetch
    Extract: Blobs & Files
    Extract: Read/Writing Local Files
    Extract: Fetch API **NEW!
13. Image Processing
    Extract: ImageData
    Extract:The Filter API
    
14. 3D WebGL
    Extract: WebGL 3D
15. 2D WebGL
    Extract: WebGL Convolutions

<ASIN:B07XJQDS4Z>

<ASIN:1871962579>

<ASIN:1871962560>

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

pico book

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info