首先新建一个txt文档，然后复制如下代码粘贴到文档内。
<html>
<head>
<title>幻影坦克制造</title>
<style type="text/css">
img {
width: 300px;
height: auto;
}
img, label, canvas, button {
display: block;
}
</style>
</head>
<body>
<p>
选择图片，点击生成，右键保存。<br />
生成的图片尺寸是图片1的尺寸。<br />
</p>
<p>
<label> 图片1（亮）：
<input id="in1" type="file" accept="image">
</label>
<label> 图片2（暗）：
<input id="in2" type="file" accept="image">
</label>
<button id="run"> 生成 </button>
</p>
<img id="out" />
<script type="text/javascript">
var img1 = document.createElement('img')
var img2 = document.createElement('img')
var in1 = document.getElementById('in1')
var in2 = document.getElementById('in2')
var run = document.getElementById('run')
in1.addEventListener('change', function () {
var reader = new FileReader()
reader.onload = function () {
img1.src = reader.result
}
reader.readAsDataURL(in1.files[0])
})
in2.addEventListener('change', function () {
var reader = new FileReader()
reader.onload = function () {
img2.src = reader.result
}
reader.readAsDataURL(in2.files[0])
})
run.addEventListener('click', function () {
var c = document.createElement('canvas')
c.width = img1.width
c.height = img1.height
var ctx = c.getContext("2d")
ctx.drawImage(img1, 0, 0)
var data1 = ctx.getImageData(0, 0, c.width, c.height)
ctx.drawImage(img2, 0, 0, c.width, c.height)
var data2 = ctx.getImageData(0, 0, c.width, c.height)
var data3 = ctx.createImageData(c.width, c.height)
var i = 0
var len = data1.data.length
var R1, G1, B1, avg1 //亮
var R2, G2, B2, avg2 //暗
var R3, G3, B3, A3 //输出
for (; i < len; i += 4) {
R1 = data1.data[i + 0] //0~255
G1 = data1.data[i + 1] //0~255
B1 = data1.data[i + 2] //0~255
avg1 = (R1 + G1 + B1) / 3 //0~255
R2 = data2.data[i + 0]
G2 = data2.data[i + 1]
B2 = data2.data[i + 2]
avg2 = (R2 + G2 + B2) / 3
A3 = avg2 - avg1 + 255 //0~255
if (A3 === 0) {
A3 = 0.0001
}
R3 = R2 * 255 / A3
G3 = G2 * 255 / A3
B3 = B2 * 255 / A3
data3.data[i + 0] = R3
data3.data[i + 1] = G3
data3.data[i + 2] = B3
data3.data[i + 3] = A3
}
ctx.putImageData(data3, 0, 0)
document.getElementById('out').src = c.toDataURL("image/png")
})
</script>
</body>
</html>
再将txt文档的后缀名改为html，这样制作工具就做好了。
<html>
<head>
<title>幻影坦克制造</title>
<style type="text/css">
img {
width: 300px;
height: auto;
}
img, label, canvas, button {
display: block;
}
</style>
</head>
<body>
<p>
选择图片，点击生成，右键保存。<br />
生成的图片尺寸是图片1的尺寸。<br />
</p>
<p>
<label> 图片1（亮）：
<input id="in1" type="file" accept="image">
</label>
<label> 图片2（暗）：
<input id="in2" type="file" accept="image">
</label>
<button id="run"> 生成 </button>
</p>
<img id="out" />
<script type="text/javascript">
var img1 = document.createElement('img')
var img2 = document.createElement('img')
var in1 = document.getElementById('in1')
var in2 = document.getElementById('in2')
var run = document.getElementById('run')
in1.addEventListener('change', function () {
var reader = new FileReader()
reader.onload = function () {
img1.src = reader.result
}
reader.readAsDataURL(in1.files[0])
})
in2.addEventListener('change', function () {
var reader = new FileReader()
reader.onload = function () {
img2.src = reader.result
}
reader.readAsDataURL(in2.files[0])
})
run.addEventListener('click', function () {
var c = document.createElement('canvas')
c.width = img1.width
c.height = img1.height
var ctx = c.getContext("2d")
ctx.drawImage(img1, 0, 0)
var data1 = ctx.getImageData(0, 0, c.width, c.height)
ctx.drawImage(img2, 0, 0, c.width, c.height)
var data2 = ctx.getImageData(0, 0, c.width, c.height)
var data3 = ctx.createImageData(c.width, c.height)
var i = 0
var len = data1.data.length
var R1, G1, B1, avg1 //亮
var R2, G2, B2, avg2 //暗
var R3, G3, B3, A3 //输出
for (; i < len; i += 4) {
R1 = data1.data[i + 0] //0~255
G1 = data1.data[i + 1] //0~255
B1 = data1.data[i + 2] //0~255
avg1 = (R1 + G1 + B1) / 3 //0~255
R2 = data2.data[i + 0]
G2 = data2.data[i + 1]
B2 = data2.data[i + 2]
avg2 = (R2 + G2 + B2) / 3
A3 = avg2 - avg1 + 255 //0~255
if (A3 === 0) {
A3 = 0.0001
}
R3 = R2 * 255 / A3
G3 = G2 * 255 / A3
B3 = B2 * 255 / A3
data3.data[i + 0] = R3
data3.data[i + 1] = G3
data3.data[i + 2] = B3
data3.data[i + 3] = A3
}
ctx.putImageData(data3, 0, 0)
document.getElementById('out').src = c.toDataURL("image/png")
})
</script>
</body>
</html>
再将txt文档的后缀名改为html，这样制作工具就做好了。
