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 [mcve] instead of working code and a vague description of what you did to break it. — Quentin, Dec 05 '18 at 11:07
https://stackoverflow.com/questions/3395359/difference-between-src-and-href this will help i guess — Code Maniac, Dec 05 '18 at 11:08
What's the relation between `attr` and canvas? Btw, the image loads successfully — lucifer63, Dec 05 '18 at 11:09

iLyas · Accepted Answer · 2018-12-05T11:43:54.477

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 05 '18 at 11:43

answered Dec 05 '18 at 11:37

iLyas

1,047
2
13
30

score 0 · Answer 2 · answered Dec 05 '18 at 11:25

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.

Loading external picture in javascript

2 Answers2