diff options
| author | Jared Adams <jaxad0127@gmail.com> | 2013-06-25 18:53:45 -0600 |
|---|---|---|
| committer | Jared Adams <jaxad0127@gmail.com> | 2013-06-25 18:53:45 -0600 |
| commit | d4f71d8ed7a57cddb59dd58ca0b60558a984a2a1 (patch) | |
| tree | 7556b6ca7240d66e29f434c297bc4c16e6b4e10b /public/dye.html | |
| parent | da89573679309ad3c8ed11b93a806ea6384ba6fb (diff) | |
| download | manaportal-d4f71d8ed7a57cddb59dd58ca0b60558a984a2a1.tar.gz manaportal-d4f71d8ed7a57cddb59dd58ca0b60558a984a2a1.tar.bz2 manaportal-d4f71d8ed7a57cddb59dd58ca0b60558a984a2a1.tar.xz manaportal-d4f71d8ed7a57cddb59dd58ca0b60558a984a2a1.zip | |
Add basic dye tool.
Diffstat (limited to 'public/dye.html')
| -rw-r--r-- | public/dye.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/public/dye.html b/public/dye.html new file mode 100644 index 0000000..f7ca177 --- /dev/null +++ b/public/dye.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + <head> + <title>Dyer</title> + <style type="text/css"> + .viewport { + border:solid 1px #000000; + display: inline-block; + height: 400px; + overflow: scroll; + width: 600px; + } + </style> + <script src="js/mp/dye.js"></script> + <script src="js/mp/resource.js"></script> + </head> + <body> + <div class="viewport" dropzone="link" ondrop="dyeDrop(event);" ondragover="event.preventDefault();"> + <canvas id="dyeCanvas"></canvas> + </div> + <div class="viewport" dropzone="link" ondrop="referenceDrop(event);" ondragover="event.preventDefault();"></div> + + <div style="display: none" > + <canvas id="rawCanvas"></canvas> + </div> + + <div><input type="text" id="dyeStringInput" size="100"/><button onclick="applyDye(event);">Apply</button></div> + + <script> + var dyeCanvas = document.getElementById("dyeCanvas"), + dyeStringInput = document.getElementById("dyeStringInput"); + + var loadedImage = null; + + function applyDye(event) { + if (loadedImage == null) { + return; + } + + var ctx = dyeCanvas.getContext("2d"); + ctx.clearRect(0, 0, dyeCanvas.width, dyeCanvas.height); + var clone = mp.resource.copyImageData(ctx, loadedImage); + mp.dye.dyeImage(clone.data, mp.dye.parseDyeString(dyeStringInput.value)); + ctx.putImageData(clone, 0, 0); + } + + function dyeDrop(event) { + event.stopPropagation(); + event.preventDefault(); + var file = event.dataTransfer.files[0], + reader = new FileReader(); + reader.onload = function (event) { + mp.resource.loadImage(event.target.result, function(err, imageData) { + if (!err) { + loadedImage = imageData; + dyeCanvas.width = loadedImage.width; + dyeCanvas.height = loadedImage.height; + applyDye(null); + } + }); + }; + reader.readAsDataURL(file); + + return false; + } + + function referenceDrop(event) { + event.stopPropagation(); + event.preventDefault(); + var file = event.dataTransfer.files[0], + reader = new FileReader(); + reader.onload = function (event) { + var img = new Image(); + img.src = event.target.result; + referenceViewport.innerHTML = ''; + referenceViewport.appendChild(img); + }; + reader.readAsDataURL(file); + return false; + } + </script> + </body> +</html> |