ge045/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Just testing d3.image.

  
## readme.png

      
    Raw
  

              readme.png
            
          
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!-- script src="/d3.js"></script -->
<script src="https://raw.githubusercontent.com/ge045/d3/feature/d3_image/d3.js"></script>

<script>

var width = 960, height = 500, fname = "readme.png";
//var width = 48, height = 64, fname = "small.jpg";
//var width = 480, height = 250, fname = "readme_xs.png";

var color = d3.scale.linear()
    .domain([15, 35, 132])
    .range(["#d7191c", "#ffffbf", "#2c7bb6"])
    .interpolate(d3.interpolateHcl);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var colorize = function(image)
{
    return function(){
        context.drawImage(image, 0, 0, width, height);

        var imageData = context.getImageData(0, 0, width, height);

        // Rescale the colors.
        for (var c, i = 0, n = width * height * 4, d = imageData.data; i < n; i += 4) {
            c = d3.rgb(color(d[i]));
            d[i + 0] = c.r;
            d[i + 1] = c.g;
            d[i + 2] = c.b;
        }

        context.putImageData(imageData, 0, 0);
    };
}

d3.image(fname, function(error, image) {
        if (error!==null) return console.log(error);
        canvas.attr("src", image.src)
        image.onload = colorize(image);
    }
);

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<!-- script src="/d3.js"></script -->
	<script src="https://raw.githubusercontent.com/ge045/d3/feature/d3_image/d3.js"></script>

	<script>

	var width = 960, height = 500, fname = "readme.png";
	//var width = 48, height = 64, fname = "small.jpg";
	//var width = 480, height = 250, fname = "readme_xs.png";

	var color = d3.scale.linear()
	.domain([15, 35, 132])
	.range(["#d7191c", "#ffffbf", "#2c7bb6"])
	.interpolate(d3.interpolateHcl);

	var canvas = d3.select("body").append("canvas")
	.attr("width", width)
	.attr("height", height);

	var context = canvas.node().getContext("2d");

	var colorize = function(image)
	{
	return function(){
	context.drawImage(image, 0, 0, width, height);

	var imageData = context.getImageData(0, 0, width, height);

	// Rescale the colors.
	for (var c, i = 0, n = width * height * 4, d = imageData.data; i < n; i += 4) {
	c = d3.rgb(color(d[i]));
	d[i + 0] = c.r;
	d[i + 1] = c.g;
	d[i + 2] = c.b;
	}

	context.putImageData(imageData, 0, 0);
	};
	}

	d3.image(fname, function(error, image) {
	if (error!==null) return console.log(error);
	canvas.attr("src", image.src)
	image.onload = colorize(image);
	}
	);

	</script>