1

我想在我的脚本中加载两个单独的图像。我已经使用以下方法完成了它：

<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>
4

6 回答 6

3 
window.onload = function () {
        var img1 = new Image();
        var img2 = new Image();

        //EDIT2 you can hide img, or simply not add them to the DOM...
        img1.style.display = "none";
        img2.style.display = "none";

        img1.src = "iphone4.png";
        img2.src = "screenshot.png";

编辑：不要这样做，您的图像将不会显示

        document.body.append(img1);

或者

        document.getElementById("myID").append(img2);
于 2013-04-22T12:39:22.553 回答
2

您可以创建一个Image没有实际标记的标记：

var img = new Image();
img.src = 'iphone4.png';
//use img however you want

希望这可以帮助。

于 2013-04-22T12:41:51.027 回答
2

“我正在做的是使用 JS 合并两个图像”

您的问题可能是由于您尝试绘制尚未加载的图像。为了避免这个问题，您可以动态创建图像并设置它们的src属性以开始加载图像并监听图像的加载事件以了解它们何时完全加载，以便您可以安全地执行合并。

我没有测试过代码，但它应该给你的想法。

var images = [
        'iphone4.png',
        'screenshot.png'
    ],
    len = images.length,
    i = 0,
    loadedCount = 0,
    img;

for (; i < len; i++) {
    img = document.createElement('img');

    //listener has to be added before setting the src attribute in case the image is cached
    img.addEventListener('load', imgLoadHandler);

    img.src = images[i];
    images[i] = img;
}

function mergeImages() {
    var img1 = images[0], 
        img2 = images[1];
    //do the merging stuff
}

function imgLoadHandler() {
    if (++loadedCount === len) {
        mergeImages();
    }
}
于 2013-04-22T13:15:22.157 回答
1

HTML5 有一种方法，但它仍然需要用户将文件放入放置目标或使用框。

使用 File API，您可以读取文件，并可能对它们进行解码。

但实际上读取文件 blob 并在本地显示它可能会很棘手。您可以使用FileReader.readAsDataURL方法将内容设置为 data: 图像标签的 URL。

示例：

$('#f').on('change', function(ev) {
    var f = ev.target.files[0];
    var fr = new FileReader();

fr.onload = function(ev2) {
    console.dir(ev2);
    $('#i').attr('src', ev2.target.result);
};

fr.readAsDataURL(f);
});​

在这里查看工作小提琴：http: //jsfiddle.net/alnitak/Qszjg/

于 2013-04-22T12:39:30.287 回答
0

使用jQuery：

$('#my_image').attr('src','image.jpg');

使用 javasript：

document.getElementById("my_image").src="image.jpg";

只需检查图像的路径

于 2013-04-22T12:41:40.197 回答
0

在头块中编写以下代码

<script>
window.onload = function () {
           document.getElementById("img1").src="iphone4.png";
           document.getElementById("img2").src="screenshot.png";
}
</script>

这将起作用

谢谢

于 2013-04-22T12:45:16.883 回答