我想在我的脚本中加载两个单独的图像。我已经使用以下方法完成了它:
<img src="iphone4.png" id="img1">
<img src="screenshot.png" id="img2">
<script>
window.onload = function () {
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
</script>
但这里的问题是图像不应该在页面上可见,而是在使用标记加载时。我只是想通过脚本加载它们,而不必先将它们添加到标记中。我意识到这是一个极其微不足道的问题,但寻找解决方案并没有给我任何帮助。
我尝试了这种方法:
window.onload = function () {
var img1 = "iphone4.png";
var img2 = "screenshot.png";
但这没有用。有一些共同的JS意识的人可以给我一些关于这个问题的意见。
编辑: 这就是标记/JS现在的样子,图像仍然显示,图像的最终合并不会显示。我得到的错误是:
IndexSizeError: Index or size is negative or greater than the allowed amount
[Stanna vid fel]
var image1 = context.getImageData(0, 0, width, height);
这是语法:
<body>
<img src="" id="img1">
<img src="" id="img2">
<p>Blended image<br><canvas id="canvas"></canvas></p>
<script>
window.onload = function () {
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
img1.src = "iphone4.png";
img2.src = "screenshot.png";
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = img1.width;
var height = img1.height;
canvas.width = width;
canvas.height = height;
var pixels = 4 * width * height;
context.drawImage(img1, 0, 0);
var image1 = context.getImageData(0, 0, width, height);
var imageData1 = image1.data;
context.drawImage(img2, 73, 265);
var image2 = context.getImageData(0, 0, width, height);
var imageData2 = image2.data;
while (pixels--) {
imageData1[pixels] = imageData1[pixels] * 0 + imageData2[pixels] * 1;
}
image1.data = imageData1;
context.putImageData(image1, 0, 0);
};
</script>