summaryrefslogtreecommitdiff
path: root/public/playground.html
diff options
context:
space:
mode:
authorFreeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace>2013-06-26 02:58:35 +1200
committerFreeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace>2013-06-26 02:58:35 +1200
commitda89573679309ad3c8ed11b93a806ea6384ba6fb (patch)
tree8b68ef02da4b8b1742e9c7ff49e1698f96e9edde /public/playground.html
parent2cf8ba330dc60fa4c269c4fdb16716a1d9ad1e90 (diff)
downloadmanaportal-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/playground.html')
-rw-r--r--public/playground.html32
1 files changed, 32 insertions, 0 deletions
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>