Loading external picture in javascript

Question

In html this works:

<img id="invisImg" src="https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w">

But that picture doesn't show up if i then try to draw it on the canvas. If i download the picture and have a local link it works fine, but then i can't save the canvas to file due to a corrupted canvas error.

If I try:

$v2Img.attr("src","https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w");

In my script file the picture doesn't load at all.

I tried with pictures hosted on dropbox as well, same problem there.

Any suggestions?

Edit: here's the core of my code HTML:

    <div id="canvas-container">
        <h2>Grafik</h2>
        <canvas id="canvas-1"></canvas>
        <a id="saveCanvas" download="canvas.jpg">Spara canvas</a>
    </div>
    <img id="invisImg" src="v2.png"> 
    <!-- Alternatives:
        https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w
        v2.png
    -->

    <script src="graphics.js"></script>
</body>

and graphics.js:

$(document).ready(function(){
var $canvas1 = $("#canvas-1");
var canvas1 = $canvas1[0];
var ctx = canvas1.getContext("2d");

ctx.drawImage(vpic,0,0,300,150); 

var dt = canvas1.toDataURL("image/jpeg");
$("#saveCanvas").attr("href",dt);

});

var $vpic = $("#invisImg");
var vpic = $vpic[0];

The image doesnt show in the canvas if stored on another server, and if it is stored locally the canvas cant be saved. I also tried to upload it to my webhotel, to see if it only was a local problem, but that didnt matter you can see it here with some extra fluff.

Try providing a minimal reproducible example instead of working code and a vague description of what you did to break it. — Quentin
– Quentin, Commented Dec 5, 2018 at 11:07
stackoverflow.com/questions/3395359/… this will help i guess — Code Maniac
– Code Maniac, Commented Dec 5, 2018 at 11:08
What's the relation between attr and canvas? Btw, the image loads successfully — lucifer63
– lucifer63, Commented Dec 5, 2018 at 11:09

iLyas · Accepted Answer · 2018-12-05 11:43:54Z

1

You can do something like that by creating an image using Javascript :

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var img = new Image();
img.src = "https://drive.google.com/uc?export=view&id=1oDTwDBuAM-IIuJi3iDE5BJlEDHolD68w";
img.onload = function() {
 ctx.drawImage(img, 0, 0, 240, 297);
};

 <canvas id="canvas"></canvas>

edited Dec 5, 2018 at 11:43

answered Dec 5, 2018 at 11:37

iLyas

1,0912 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pid · Accepted Answer · 2018-12-05 11:25:08Z

0

There's a CORS security policy by which "tainted" pixels (coming from different origins) cannot be handled freely. This is meant to protect users from attacks which eavesdrop on user pixel data.

You have to allow cross-origin when you start your browser to get around this security boundary.

Here is some more about canvas and pixel data.

answered Dec 5, 2018 at 11:25

pid

11.6k6 gold badges37 silver badges67 bronze badges

Collectives™ on Stack Overflow

Loading external picture in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related