diff options
| author | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-06-26 02:58:35 +1200 |
|---|---|---|
| committer | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-06-26 02:58:35 +1200 |
| commit | da89573679309ad3c8ed11b93a806ea6384ba6fb (patch) | |
| tree | 8b68ef02da4b8b1742e9c7ff49e1698f96e9edde /public | |
| parent | 2cf8ba330dc60fa4c269c4fdb16716a1d9ad1e90 (diff) | |
| download | manaportal-da89573679309ad3c8ed11b93a806ea6384ba6fb.tar.gz manaportal-da89573679309ad3c8ed11b93a806ea6384ba6fb.tar.bz2 manaportal-da89573679309ad3c8ed11b93a806ea6384ba6fb.tar.xz manaportal-da89573679309ad3c8ed11b93a806ea6384ba6fb.zip | |
Implement dyeImage
Split loadImage into a common resource.js
Add a compatability check for both canvas-node and browser functionality
Note that the generated dyed image is off-by-one to the tested TMWW image.
The algorithm needs verification and possibly correction.
Either way, it's close enough by the eye.
Diffstat (limited to 'public')
| -rw-r--r-- | public/js/mp/dye.js | 39 | ||||
| -rw-r--r-- | public/js/mp/resource.js | 36 | ||||
| -rw-r--r-- | public/playground.html | 32 |
3 files changed, 107 insertions, 0 deletions
diff --git a/public/js/mp/dye.js b/public/js/mp/dye.js index 530b6c4..7cf8da5 100644 --- a/public/js/mp/dye.js +++ b/public/js/mp/dye.js @@ -28,11 +28,50 @@ var mp = function(mp) { return { channel: channel[idx], intensity: max }; } + /* + * Return a dye specification from a dye string. + */ function parseDyeString(dyeString) { /* TODO */ } + /* + * Dye the internal image data based on the specification provided by dyeData. + * The specification can be generated from a dyeString by parseDyeString. + * The array passed in will be modified. + */ function dyeImage(imageData, dyeData) { + for (var p = 0; p < imageData.length; p += 4) { + var pixel = [imageData[p], imageData[p + 1], imageData[p + 2]]; + var alpha = imageData[p + 3]; + if (!alpha) { + continue; + } + + var channel = getChannel(pixel); + var channelId = channel.channel; + + if (!channelId || !(channelId in dyeData) || !dyeData[channelId].length) { + continue; + } + + var intensity = channel.intensity; + var val = intensity * dyeData[channelId].length + var i = Math.floor(val / 255); + var t = val - i * 255; + if (!t) { + --i; + imageData[p ] = dyeData[channelId][i][0]; + imageData[p + 1] = dyeData[channelId][i][1]; + imageData[p + 2] = dyeData[channelId][i][2]; + continue; + } + + imageData[p ] = ((255 - t) * (i && dyeData[channelId][i - 1][0]) + t * dyeData[channelId][i][0]) / 255; + imageData[p + 1] = ((255 - t) * (i && dyeData[channelId][i - 1][1]) + t * dyeData[channelId][i][1]) / 255; + imageData[p + 2] = ((255 - t) * (i && dyeData[channelId][i - 1][2]) + t * dyeData[channelId][i][2]) / 255; + } /* TODO */ + return imageData; } return mp; }(mp || {}); diff --git a/public/js/mp/resource.js b/public/js/mp/resource.js new file mode 100644 index 0000000..f348a89 --- /dev/null +++ b/public/js/mp/resource.js @@ -0,0 +1,36 @@ +"use strict"; +var mp = function(mp) { + mp.resource = { + loadImage: loadImage + }; + + /* + * Quick compatability workaround + * node testing environment needs new Canvas() and won't tolerate document.createElement("canvas") + * A createCanvas method is therefore provided in its sandbox which can be quickly checked to determine the method needed + */ + var createCanvas = "createCanvas" in document ? document.createCanvas : function() { return document.createElement("canvas"); }; + + var canvas = createCanvas(); + var context = canvas.getContext("2d"); + + /* + * Load in an image given a URL. + * The provided callback will fire when loading is complete. + * The parameters will be false and the the imageData if successful, and false and the error otherwise. + */ + function loadImage(url, callback) { + var image = new Image(); + image.onload = function() { + canvas.width = image.width; + canvas.height = image.height; + context.drawImage(image, 0, 0); + callback(false, context.getImageData(0, 0, image.width, image.height)); + }; + image.onerror = function(err) { + callback(true, err); + }; + image.src = url; + } + return mp; +}(mp || {}); diff --git a/public/playground.html b/public/playground.html new file mode 100644 index 0000000..3099b83 --- /dev/null +++ b/public/playground.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html> +<head> +</head> +<body> +<canvas id="original" width="32" height="32"></canvas> +<canvas id="dyed" width="32" height="32"></canvas> +</body> + +<script src="js/mp/dye.js"></script> +<script src="js/mp/resource.js"></script> +<script> +var dyeData = { + "R": [ + [0xed, 0xe5, 0xb2], + [0xff, 0xf7, 0xbf] + ], + "G": [ + [0xcc, 0xcc, 0xcc], + [0xff, 0xff, 0xff] + ] +}; +mp.resource.loadImage("bigcake.png", function(err, imageData) { + var oContext = document.getElementById("original").getContext("2d"); + var dContext = document.getElementById("dyed").getContext("2d"); + oContext.putImageData(imageData, 0, 0); + mp.dye.dyeImage(imageData.data, dyeData); + dContext.putImageData(imageData, 0, 0); +}); +</script> +</html> |