Question

92

How do I load a local image using JS?

rated 0 times [ 94] [ 2] / answers: 1 / hits: 29069 / 11 Years ago, mon, april 22, 2013, 12:00:00

I want to load two separate images in my script. I've accomplished it using:

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

Problem here though is that the images should not be visible on the page but are when loaded using markup. I simply want to load them through the script without first having to add them in the markup. I realize this is an extremely trivial problem, but searching for a solution has given me nothing.

I tried this approach:

        window.onload = function () {

            var img1 = iphone4.png;

            var img2 = screenshot.png;

But this did not work.
Can someone with some common JS sense please give me some input on this issue.

EDIT :
So this is how the markup/JS looks now, the images are still displayed and the final merge of the images won't show. The error I get is:

IndexSizeError: Index or size is negative or greater than the allowed amount

[Stanna vid fel]    



var image1 = context.getImageData(0, 0, width, height);

And this is the syntax:

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaydon

Add To Favorites

Follow

Total Points: 651

Total Questions: 103

Total Answers: 100

Location: Norway

Member since Mon, May 23, 2022

2 Years ago

answered 11 Years ago anyssaarielles · Accepted Answer

What I'm doing is merging two images using JS

Your problem is probably due to the fact that you are trying to draw images that have not been loaded yet. To circumvent this issue, you could create the images dynamically and set their src attribute to start loading the image and listen to the image's load event to know when they are fully loaded so that you can perform the merge safely.

I have not tested the code, but it should give you the idea.

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

    }

}