| 開発環境 |
メモ帳 |
| 実行環境 |
Microsoft Edge |
to256.html
<!doctype html>
<head>
<title>to256</title>
</head>
<body>
<div id="drop" style="width:800px; height:150px; border:3px solid; padding:10px;"
ondragover="onDragOver(event)" ondrop="onDrop(event)">
1. ここに画像ファイルをドロップします。<br>
2. 加工ボタンを押します。<br>
3. 加工後の画像を右クリックし画像を保存します。<br>
</div>
<br>
<button onclick="proc()">加工</button>
<p>
・加工後の画像<br>
<img id="img2"></img>
</p>
<p>
・オリジナル画像<br>
<img id="img1"></img>
</p>
<p>
・作業用キャンヴァス<br>
<canvas id="canvas"></canvas>
</p>
<script>
function proc()
{
var width = img1.width;
var height = img1.height;
// 作業用キャンヴァスにオリジナル画像を転写
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
context.drawImage(img1, 0, 0);
// 画像データの加工
var imageData = context.getImageData(0, 0, width, height);
var data = imageData.data;
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var base = (y * width + x) * 4;
data[base + 0] &= 0xC0; // r 1100 0000
data[base + 1] &= 0xE0; // g 1110 0000
data[base + 2] &= 0xC0; // b 1100 0000
data[base + 3] = 0xFF; // a 1111 1111
}
}
context.putImageData(imageData, 0, 0);
img2.src = canvas.toDataURL("image/png");
}
function onDragOver(event)
{
event.preventDefault();
}
function onDrop(event)
{
var files = event.dataTransfer.files;
var file = files[0];
if (file.type.match("image.*")) {
var reader = new FileReader();
reader.onload = function(evt) {
img1.src = evt.target.result;
}
reader.readAsDataURL(file);
}
event.preventDefault();
}
</script>
</body>
最終更新：2016年02月10日 20:24
