cavasttest.js

"use strict";
var csprkdemo = {};
csprkdemo.ui = {};

(csprkdemo.ui.main = function () {
	var config, init, events;
	config = {
		params: {}
	};
	init = function (params) {
		config.params = params;
		csprkdemo.ui.dynamicImage.init({
			imageSrc: "dt.jpg",
			callBack: function () {
			}
		});
	};
	events = {
		init: function () {
		
		}
	};
	return {
		init: init
	};
}());

(csprkdemo.ui.dynamicImage = function () {
	var config, init, events, image, pixels;
	config = {
		params: {},
		image: {},
		context: document.getElementById('viewport').getContext('2d'),
		buffer:  document.getElementById('buffer').getContext('2d')
	};
	init = function (params) {
		config.params = params;
		image.load();
	};
	image = {
		load: function () {
			config.image = document.createElement('image');
			config.image.onload = image.onload;
			config.image.src = config.params.imageSrc;
		},
		onload: function () {
			var bounds, pixeltjes;

			image.reDimension();
			config.context.drawImage(config.image, 0, 0);
			
			bounds = {x: 0, y: 0, width: config.image.width, height: config.image.height};
			
			pixeltjes = pixels.getData(bounds);
			pixels.setData(bounds, pixeltjes);
			
			config.params.callBack();
		},
		reDimension: function () {
			config.context.canvas.width = config.image.width;
			config.context.canvas.height = config.image.height;
			config.buffer.canvas.width = config.image.width;
			config.buffer.canvas.height = config.image.height;
		}
	};
	pixels = {
		getPixel: function (x, y) {
		
		},
		getData: function (bounds) {
			return config.context.getImageData(bounds.x, bounds.y, bounds.width, bounds.height);
		},
		getBuffer: function (bounds) {
			return config.context.getImageData(bounds.x, bounds.y, bounds.width, bounds.height);
		},
		setData: function (bounds, pixeldata) {
			var i, bufferdata = pixels.getBuffer(bounds);
			
			for (i = 0, n = pixeldata.data.length; i < n; i += 4)
			{
				pixeldata.data[i + 0] = bufferdata.data[i + 0];
				pixeldata.data[i + bounds.width + 1] = bufferdata.data[i + bounds.height - 2];
				pixeldata.data[i + (bounds.width * 10)+ 2] = bufferdata.data[i + 4];
				pixeldata.data[i + 3] = 255; //bufferdata.data[i + 5];
			}
			config.context.putImageData(pixeldata, bounds.x, bounds.y);
		}
	};
	events = {
		init: function () {
		
		}
	};
	return {
		init: init
	};
}());

csprkdemo.ui.main.init();