raybelisle/app.js

## app.js
var currentColor = [255,255,255]; //default color is white

var wv = Ti.UI.createWebView({
	url : '/html/canvas.html',
	height : 500,
	width : 500,
	visible : false
});

function changeSignatureColor(e) {
  /*
  Pass in an array containing the color to change to
  [R, G, B]

  */
	var f = Titanium.Filesystem.getFile($.signature.backgroundImage);
	var img = f.read();

	Ti.API.info('about to fire PageReady');
	Ti.App.fireEvent('pageReady', {
		id : f.nativePath,
		currentColor : currentColor,
		color : e.color
	});

	currentColor = e.color;


}

## canvas.html
<html>
	<head>
		<script>
				var img = new Image();
			Ti.App.addEventListener('pageReady', function(e) {
				Ti.API.info('PageReady has been called');
				//create a canvas element
				var canvas = document.createElement('canvas');
				var context = canvas.getContext("2d");

        //Set the image source to the image passed in variable e
				img.src = e.id;

				//once the image is loaded, then we can manipulate it
				img.onload = function() {
					canvas.width = img.width;
					canvas.height = img.height;
					Ti.API.info('about to paint the image');
					context.drawImage(img, 0, 0);
					var imgData = context.getImageData(0, 0, img.width, img.height);
					// change colors
					for (var i = 0; i < imgData.data.length; i += 4) {
						if (imgData.data[i] == e.currentColor[0] && imgData.data[i+1]==e.currentColor[1] && imgData.data[i+2]==e.currentColor[2]) {
						  //when we find a pixel that matches the currentColor, we replace it with our new color
							imgData.data[i] = e.color[0];
							imgData.data[i + 1] = e.color[1];
							imgData.data[i + 2] = e.color[2];
						}
					}
					//Now we update the image
					context.putImageData(imgData, 0, 0);
					Ti.API.info('image painted');

					var retImg = canvas.toDataURL('image/png');
					Ti.App.fireEvent("app:returnImage", {image: retImg});
				};

			});

		</script>
	</head>
	<body>

	</body>
</html>
	var currentColor = [255,255,255]; //default color is white

	var wv = Ti.UI.createWebView({
	url : '/html/canvas.html',
	height : 500,
	width : 500,
	visible : false
	});

	function changeSignatureColor(e) {
	/*
	Pass in an array containing the color to change to
	[R, G, B]

	*/
	var f = Titanium.Filesystem.getFile($.signature.backgroundImage);
	var img = f.read();

	Ti.API.info('about to fire PageReady');
	Ti.App.fireEvent('pageReady', {
	id : f.nativePath,
	currentColor : currentColor,
	color : e.color
	});

	currentColor = e.color;


	}
	<html>
	<head>
	<script>
	var img = new Image();
	Ti.App.addEventListener('pageReady', function(e) {
	Ti.API.info('PageReady has been called');
	//create a canvas element
	var canvas = document.createElement('canvas');
	var context = canvas.getContext("2d");

	//Set the image source to the image passed in variable e
	img.src = e.id;

	//once the image is loaded, then we can manipulate it
	img.onload = function() {
	canvas.width = img.width;
	canvas.height = img.height;
	Ti.API.info('about to paint the image');
	context.drawImage(img, 0, 0);
	var imgData = context.getImageData(0, 0, img.width, img.height);
	// change colors
	for (var i = 0; i < imgData.data.length; i += 4) {
	if (imgData.data[i] == e.currentColor[0] && imgData.data[i+1]==e.currentColor[1] && imgData.data[i+2]==e.currentColor[2]) {
	//when we find a pixel that matches the currentColor, we replace it with our new color
	imgData.data[i] = e.color[0];
	imgData.data[i + 1] = e.color[1];
	imgData.data[i + 2] = e.color[2];
	}
	}
	//Now we update the image
	context.putImageData(imgData, 0, 0);
	Ti.API.info('image painted');

	var retImg = canvas.toDataURL('image/png');
	Ti.App.fireEvent("app:returnImage", {image: retImg});
	};

	});

	</script>
	</head>
	<body>

	</body>
	</html>