CODEWITHSUNDEEP
javascript
AndroidHustle
AndroidHustle

Reputation: 1814

How do I load a local image using JS?

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>

Upvotes: 2

Views: 38716

Answers (6)

Hariharan
Hariharan

Reputation: 3263

Write the below code in head block

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

This will work

Thanks

Upvotes: 0

plalx
plalx

Reputation: 43728

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

Upvotes: 2

Pouki
Pouki

Reputation: 1664

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

EDIT: DO NOT DO THAT and your images won't be displayed

        document.body.append(img1);

OR

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

Upvotes: 3

Chad
Chad

Reputation: 19619

You can create an Image without having the actual tag in the markup:

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

Hope this helps.

Upvotes: 3

Davor Mlinaric
Davor Mlinaric

Reputation: 2027

using jquery:

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

using javasript:

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

just check path to your image

Upvotes: 0

Anil
Anil

Reputation: 1028

There is a way with HTML5, but it would still require the user to have dropped the file into a drop target or use a box.

Using the File API you can read files, and potentially decode them.

Actually reading the file blob and displaying it locally may be tricky though. You may be able to use the FileReader.readAsDataURL method to set the content as a data: URL for the image tag.

example:

$('#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);
});​

see the working fiddle here : http://jsfiddle.net/alnitak/Qszjg/

Upvotes: 1

Related Questions