AliMD/jsbin.atipuj.html

## jsbin.atipuj.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Image 2 Box-Shadow !!!</title>
</head>
<body>
  <div id="box"></div>
  <script src="image2boxshadow.js" type="text/javascript"></script>
</body>
</html>

## jsbin.atipuj.js
var
  map = [],
  canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d'),
  image = new Image(),
  scale = 4,
  zeroFill = function(num, padding) {
    return Array(padding + 1 - (num + '').length).join('0') + num;
  },
  calcImgData = function (){
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, image.width, image.height);

    var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;

    for (var i = 0; i < data.length; i+=4) {
      var
      red = zeroFill(data[i].toString(16), 2),
      green = zeroFill(data[i + 1].toString(16), 2),
      blue = zeroFill(data[i + 2].toString(16), 2),
      hex = red + green + blue;
      map.push(hex);
    }

    drawImg();
  },
  drawImg = function (){
    var boxShadow = [],k=0;
    for(var i=0;i<canvas.width;i++){
      for(var j=0;j<canvas.height;j++){
        boxShadow.push( ((j+1)*scale)+'px '+(i*scale)+'px '+'0px 0 #'+map[k] );
        k++;
      }
    }

    boxShadow=boxShadow.join(',');
    console.log(boxShadow);
    box.style.cssText = "width:" + scale + "px; height:" + scale + "px;box-shadow:" + boxShadow;
  },
  init = function(){
    image.onload = calcImgData;
    image.src = 'img.jpg';
  };

init();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Image 2 Box-Shadow !!!</title>
	</head>
	<body>
	<div id="box"></div>
	<script src="image2boxshadow.js" type="text/javascript"></script>
	</body>
	</html>
	var
	map = [],
	canvas = document.createElement('canvas'),
	ctx = canvas.getContext('2d'),
	image = new Image(),
	scale = 4,
	zeroFill = function(num, padding) {
	return Array(padding + 1 - (num + '').length).join('0') + num;
	},
	calcImgData = function (){
	canvas.width = image.width;
	canvas.height = image.height;
	ctx.drawImage(image, 0, 0, image.width, image.height);

	var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;

	for (var i = 0; i < data.length; i+=4) {
	var
	red = zeroFill(data[i].toString(16), 2),
	green = zeroFill(data[i + 1].toString(16), 2),
	blue = zeroFill(data[i + 2].toString(16), 2),
	hex = red + green + blue;
	map.push(hex);
	}

	drawImg();
	},
	drawImg = function (){
	var boxShadow = [],k=0;
	for(var i=0;i<canvas.width;i++){
	for(var j=0;j<canvas.height;j++){
	boxShadow.push( ((j+1)scale)+'px '+(iscale)+'px '+'0px 0 #'+map[k] );
	k++;
	}
	}

	boxShadow=boxShadow.join(',');
	console.log(boxShadow);
	box.style.cssText = "width:" + scale + "px; height:" + scale + "px;box-shadow:" + boxShadow;
	},
	init = function(){
	image.onload = calcImgData;
	image.src = 'img.jpg';
	};

	init();