function grayscale(image, bPlaceImage) {
	var myCanvas = document.createElement("canvas"),
					myCanvasContext = myCanvas.getContext("2d"),
					imgWidth = image.width,
					imgHeight = image.height,
					imageData;
	// You'll get some string error if you fail to specify the dimensions
	myCanvas.width = imgWidth;
	myCanvas.height = imgHeight;
	myCanvasContext.drawImage(image, 0, 0);
	
	// The getImageData() function cannot be called if the image is not from the same domain.
	// You'll get security error
	imageData = myCanvasContext.getImageData(0, 0, imgWidth, imgHeight);
	for (i = 0; i < imageData.height; i++) {
		for (j = 0; j < imageData.width; j++) {
			var index = (i * 4) * imageData.width + (j * 4),
							red = imageData.data[index],
							green = imageData.data[index + 1],
							blue = imageData.data[index + 2],
							alpha = imageData.data[index + 3],
							average = (red + green + blue) / 3;
			imageData.data[index] = average;
			imageData.data[index + 1] = average;
			imageData.data[index + 2] = average;
			imageData.data[index + 3] = alpha;
		}
	}
	myCanvasContext.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);

	if (bPlaceImage) {
		var myDiv = document.createElement("span");
		myDiv.appendChild(myCanvas);
		image.parentNode.appendChild(myCanvas); //, image);
	}
	return myCanvas.toDataURL();
}