【D3.js】画像をデータセットとして使う

読み込んだ画像ファイルをcanvasに転写し、getImageDataで取得したcanvasPixelArrayを整形して、d3へ渡します。
後は受けとったデータを元にsvgのcircleで描画。
詳細はexampleのソースを参照してください。

ボタンクリックで、色情報を元に分解　→　あんまり綺麗に分解できず orz

var w = 100;
var h = 100;

//canvas 設置
d3.select('body').append('canvas')
  .attr('id', 'canvas')
  .attr('width', w)
  .attr('heigh', h)
  .attr('style', 'display:none')

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//イメージオブジェクト作成
var imgObj = new Image();
imgObj.src = "Parrots.jpg";


imgObj.onload = function() {   //画像の読み込み
	
	ctx.drawImage(imgObj, 0, 0); //canvasに転写
	
	var imgData = ctx.getImageData(0, 0, w, h); //ImageDataオブジェクト取得


	var imgDataArray  = [];
	for(var i=0; i < imgData.width * imgData.height * 4 ; i+=4){	
		//canvasPixelArrayを整形したデータをimgDataArrayに
		imgDataArray.push( {
			r:imgData.data[i],
			g:imgData.data[i+1],
			b:imgData.data[i+2],
			color:(function(r,g,b){return ((((0<<8)+r<<8)+g<<8)+b)})(imgData.data[i], imgData.data[i+1], imgData.data[i+2])
		} ); 
		
		
	}

	var svg = d3.select('body').append('svg'); //svgタグ設置
	
	svg.selectAll("circle")
		.data(imgDataArray)  //canvasから取得したピクセルデータ
		.enter()
		.append("svg:circle")
		.attr('cx', function(d, i){ return (i % w) * 2})
		.attr('cy', function(d, i){ return Math.floor(i / w) * 2})
		.attr('fill', function(d, i){ return  "#" + d.color.toString(16)})
		.attr('r', 2)
	
}

var w = 100;

var h = 100;

//canvas 設置

d3.select('body').append('canvas')

.attr('id', 'canvas')

.attr('width', w)

.attr('heigh', h)

.attr('style', 'display:none')

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

//イメージオブジェクト作成

var imgObj = new Image();

imgObj.src = "Parrots.jpg";

imgObj.onload = function() { //画像の読み込み

ctx.drawImage(imgObj, 0, 0); //canvasに転写

var imgData = ctx.getImageData(0, 0, w, h); //ImageDataオブジェクト取得

var imgDataArray = [];

for(var i=0; i < imgData.width * imgData.height * 4 ; i+=4){

//canvasPixelArrayを整形したデータをimgDataArrayに

imgDataArray.push( {

r:imgData.data[i],

g:imgData.data[i+1],

b:imgData.data[i+2],

color:(function(r,g,b){return ((((0<<8)+r<<8)+g<<8)+b)})(imgData.data[i], imgData.data[i+1], imgData.data[i+2])

} );

}

var svg = d3.select('body').append('svg'); //svgタグ設置

svg.selectAll("circle")

.data(imgDataArray) //canvasから取得したピクセルデータ

.enter()

.append("svg:circle")

.attr('cx', function(d, i){ return (i % w) * 2})

.attr('cy', function(d, i){ return Math.floor(i / w) * 2})

.attr('fill', function(d, i){ return "#" + d.color.toString(16)})

.attr('r', 2)

}

example

【D3.js】画像をデータセットとして使う

投稿者: shimizu

“【D3.js】画像をデータセットとして使う” への1件の返信