Question

我想在我的脚本中加载两个单独的图像。我用它完成了它：

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

Answer 1

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);

OR

        document.getElementById("myID").append(img2);

Answer 2

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

您的问题可能是因为您正在尝试绘制尚未加载的图像。要解决此问题，您可以动态创建图像并设置其src属性以开始加载图像并侦听图像的加载事件以了解它们何时完全加载，以便您可以安全地执行合并。 p>

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

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();
    }
}

Answer 3

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

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

实际上读取文件blob并在本地显示它可能会很棘手。您可以使用 FileReader.readAsDataURL 方法将内容设置为数据：图片代码的网址。

示例：

$('#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/

Answer 4

您可以在标记中创建Image而不使用实际标记：

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

希望这有帮助。

Answer 5

使用jquery：

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

使用javascript：

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

只检查图片的路径

Answer 6

在头部块中写下以下代码

window.onload = function（）{ 。的document.getElementById（ “IMG1”）SRC = “iphone4.png”; 。的document.getElementById（ “IMG2”）SRC = “screenshot.png”; }

这将有效

由于

如何使用JS加载本地图像？

6 个答案: