yoya/dropimage.html

## dropimage.html
<html>
<head>
  <title> Image Drop Sample </title>
  <style>
    body   { background-color: #eff; }
    canvas { border: 2px solid #888; }
  </style>
</head>
<body<html>
<head>
  <title> Image Drop Sample </title>
  <style>
    body   { background-color: #eff; }
    canvas { border: 2px solid #888; }
  </style>
</head>
<body>

<canvas id="srcCanvas" width="400" height="400"> </canvas>
<canvas id="dstCanvas" width="400" height="400"> </canvas>

<script type="text/javascript">

var srcCanvas = document.getElementById('srcCanvas');
var dstCanvas = document.getElementById('dstCanvas');
var srcCtx    = srcCanvas.getContext("2d");
var dstCtx    = dstCanvas.getContext("2d")
var width  = srcCanvas.width;
var height = srcCanvas.height;

window.onload = function() {
    document.addEventListener("dragover" , cancelEvent, false);
    document.addEventListener("dragenter", cancelEvent, false);
    document.addEventListener("drop"     , dropFunc   , false);
}

var cancelEvent = function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
};

var dropFunc = function(e) {
    e.preventDefault();
    var reader = new FileReader();
    reader.onload = function (evt) {
        var img = new Image();
      	img.onload = function() {
	    console.debug("imagesize", img.width, img.height);
            var offc = document.createElement("canvas");
       	    offc.width  = width;
            offc.height = height;
            var offctx = offc.getContext("2d");
            offctx.drawImage(img, 0, 0,	width, height);
            var srcImageData = offctx.getImageData(0, 0, width,	height);
            var dstImageData = offctx.createImageData(srcImageData);
            ConvertImage(srcImageData, dstImageData);
            srcCtx.putImageData(srcImageData, 0, 0);
            dstCtx.putImageData(dstImageData, 0, 0);
       	}
	img.src = evt.target.result;
    }
    reader.readAsDataURL(e.dataTransfer.files[0]);
    return false;
};

function ConvertImage(src, dst) {
    // reverse routine
    var srcData = src.data;
    var dstData = dst.data;
    var n = src.width * src.height * 4; // RGBA 4 byte
    for (i = 0 ; i < n; i++) {
       if ((i%4) !== 3) {
           dstData[i] =  256 - srcData[i]; // R, G, B
       } else {
           dstData[i] =	srcData[i];        // A (alpha)
       }
    }
}

</script>

</body>
</html>

<canvas id="srcCanvas" width="400" height="400"> </canvas>
<canvas id="dstCanvas" width="400" height="400"> </canvas>

<script type="text/javascript">

var srcCanvas = document.getElementById('srcCanvas');
var dstCanvas = document.getElementById('dstCanvas');
var srcCtx    = srcCanvas.getContext("2d");
var dstCtx    = dstCanvas.getContext("2d")
var width  = srcCanvas.width;
var height = srcCanvas.height;

window.onload = function() {
    document.addEventListener("dragover" , cancelEvent, false);
    document.addEventListener("dragenter", cancelEvent, false);
    document.addEventListener("drop"     , dropFunc   , false);
}

var cancelEvent = function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
};

var dropFunc = function(e) {
    e.preventDefault();
    var reader = new FileReader();
    reader.onload = function (evt) {
        var img = new Image();
      	img.onload = function() {
	    console.debug("imagesize", img.width, img.height);
            var offc = document.createElement("canvas");
       	    offc.width  = width;
            offc.height = height;
            var offctx = offc.getContext("2d");
            offctx.drawImage(img, 0, 0,	width, height);
            var srcImageData = offctx.getImageData(0, 0, width,	height);
            var dstImageData = offctx.createImageData(srcImageData);
            ConvertImage(srcImageData, dstImageData);
            srcCtx.putImageData(srcImageData, 0, 0);
            dstCtx.putImageData(dstImageData, 0, 0);
       	}
	img.src = evt.target.result;
    }
    reader.readAsDataURL(e.dataTransfer.files[0]);
    return false;
};

function ConvertImage(src, dst) {
    // reverse routine
    var srcData = src.data;
    var dstData = dst.data;
    var n = 4 * src.width * src.height;
    for (i = 0 ; i < n; i++) {
       if ((i%4) !== 3) {
           dstData[i] =  256 - srcData[i];
       } else {
           dstData[i] = srcData[i];
       }
    }
}

</script>

</body>
</html>
	<html>
	<head>
	<title> Image Drop Sample </title>
	<style>
	body { background-color: #eff; }
	canvas { border: 2px solid #888; }
	</style>
	</head>
	<body<html>
	<head>
	<title> Image Drop Sample </title>
	<style>
	body { background-color: #eff; }
	canvas { border: 2px solid #888; }
	</style>
	</head>
	<body>

	<canvas id="srcCanvas" width="400" height="400"> </canvas>
	<canvas id="dstCanvas" width="400" height="400"> </canvas>

	<script type="text/javascript">

	var srcCanvas = document.getElementById('srcCanvas');
	var dstCanvas = document.getElementById('dstCanvas');
	var srcCtx = srcCanvas.getContext("2d");
	var dstCtx = dstCanvas.getContext("2d")
	var width = srcCanvas.width;
	var height = srcCanvas.height;

	window.onload = function() {
	document.addEventListener("dragover" , cancelEvent, false);
	document.addEventListener("dragenter", cancelEvent, false);
	document.addEventListener("drop" , dropFunc , false);
	}

	var cancelEvent = function(e) {
	e.preventDefault();
	e.stopPropagation();
	return false;
	};

	var dropFunc = function(e) {
	e.preventDefault();
	var reader = new FileReader();
	reader.onload = function (evt) {
	var img = new Image();
	img.onload = function() {
	console.debug("imagesize", img.width, img.height);
	var offc = document.createElement("canvas");
	offc.width = width;
	offc.height = height;
	var offctx = offc.getContext("2d");
	offctx.drawImage(img, 0, 0, width, height);
	var srcImageData = offctx.getImageData(0, 0, width, height);
	var dstImageData = offctx.createImageData(srcImageData);
	ConvertImage(srcImageData, dstImageData);
	srcCtx.putImageData(srcImageData, 0, 0);
	dstCtx.putImageData(dstImageData, 0, 0);
	}
	img.src = evt.target.result;
	}
	reader.readAsDataURL(e.dataTransfer.files[0]);
	return false;
	};

	function ConvertImage(src, dst) {
	// reverse routine
	var srcData = src.data;
	var dstData = dst.data;
	var n = src.width * src.height * 4; // RGBA 4 byte
	for (i = 0 ; i < n; i++) {
	if ((i%4) !== 3) {
	dstData[i] = 256 - srcData[i]; // R, G, B
	} else {
	dstData[i] = srcData[i]; // A (alpha)
	}
	}
	}

	</script>

	</body>
	</html>

	<canvas id="srcCanvas" width="400" height="400"> </canvas>
	<canvas id="dstCanvas" width="400" height="400"> </canvas>

	<script type="text/javascript">

	var srcCanvas = document.getElementById('srcCanvas');
	var dstCanvas = document.getElementById('dstCanvas');
	var srcCtx = srcCanvas.getContext("2d");
	var dstCtx = dstCanvas.getContext("2d")
	var width = srcCanvas.width;
	var height = srcCanvas.height;

	window.onload = function() {
	document.addEventListener("dragover" , cancelEvent, false);
	document.addEventListener("dragenter", cancelEvent, false);
	document.addEventListener("drop" , dropFunc , false);
	}

	var cancelEvent = function(e) {
	e.preventDefault();
	e.stopPropagation();
	return false;
	};

	var dropFunc = function(e) {
	e.preventDefault();
	var reader = new FileReader();
	reader.onload = function (evt) {
	var img = new Image();
	img.onload = function() {
	console.debug("imagesize", img.width, img.height);
	var offc = document.createElement("canvas");
	offc.width = width;
	offc.height = height;
	var offctx = offc.getContext("2d");
	offctx.drawImage(img, 0, 0, width, height);
	var srcImageData = offctx.getImageData(0, 0, width, height);
	var dstImageData = offctx.createImageData(srcImageData);
	ConvertImage(srcImageData, dstImageData);
	srcCtx.putImageData(srcImageData, 0, 0);
	dstCtx.putImageData(dstImageData, 0, 0);
	}
	img.src = evt.target.result;
	}
	reader.readAsDataURL(e.dataTransfer.files[0]);
	return false;
	};

	function ConvertImage(src, dst) {
	// reverse routine
	var srcData = src.data;
	var dstData = dst.data;
	var n = 4 * src.width * src.height;
	for (i = 0 ; i < n; i++) {
	if ((i%4) !== 3) {
	dstData[i] = 256 - srcData[i];
	} else {
	dstData[i] = srcData[i];
	}
	}
	}

	</script>

	</body>
	</html>