我想在我的脚本中加载两个单独的图像。我使用以下方法完成了它:
<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>
最佳答案
您可以创建一个 Image 而无需在标记中包含实际标签:
var img = new Image();
img.src = 'iphone4.png';
//use img however you want
希望这对您有所帮助。
关于javascript - 如何使用JS加载本 map 片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16147238/