Question

195

Fetching image from url with javascript

rated 0 times [ 196] [ 1] / answers: 1 / hits: 31988 / 11 Years ago, sat, august 24, 2013, 12:00:00

I am trying to show an image on my page from a different url.

<body>

<div id=container>

    <br />



    <canvas width=500px height=375px id=canvas>

    </canvas>

    <img src=http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png />



</div>

<script>



    var img = new Image;

    img.src = http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png;



    var timer = setInterval(function () { MyTimer() }, 200);

    function MyTimer() {

        var ctx = canvas.getContext('2d');

        ctx.drawImage(img, 0, 0,500,675);

        img = new Image;

        img.src = http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png;

    }

</script>

The image on the other site is being saved every 1.5 seconds.

The result is that I cant view the image.

Any ideas why?

Thanks!

Answers

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

monetm

Add To Favorites

Follow

Total Points: 615

Total Questions: 103

Total Answers: 119

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

monetm questions

1 How to protect API routes in Next.js?

Fri, Feb 26, 21, 00:00, 3 Years ago

1 React props for passing color

Wed, Sep 9, 20, 00:00, 4 Years ago

1 How to catch the error when making fetch api request?

Sun, Jul 26, 20, 00:00, 4 Years ago

1 How to stop propagation on Link elements from React-Router-Dom?

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Wait for an xpath in Puppeteer

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 11 Years ago sabrina · Accepted Answer

1. Cache issue

Your MyPicture.png returns Cache-Control: max-age=31536000 in HTTP response. So browser may get image from its cache on second time. You need to add query string something like thie:

img.src = http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png?time= + (new Date()).getTime();

2. Too short fetching period.

I think fetching period 200msec is too short. It's better to bind onload event handler to the image object. See How to fetch a remote image to display in a canvas?.

function copyCanvas(img) {

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    ctx.drawImage(img, 0, 0);

}



function loadImage() {

    var img = new Image();

    img.onload = function () {

        copyCanvas(img);

    };

    img.src = http://yinoneliraz-001-site1.smarterasp.net/MyPicture.png?time= + (new Date()).getTime();

}

3. Double buffering

I think your script intend to pre-load image. So it's better to make a double buffering.

Single Buffering version: http://jsfiddle.net/tokkonoPapa/dSJmy/1/

Double Buffering version: http://jsfiddle.net/tokkonoPapa/dSJmy/2/