CODEWITHSUNDEEP
javascripthtmlcanvas
Bjathr
Bjathr

Reputation: 93

Loading external picture in javascript

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.

Upvotes: 0

Views: 2802

Answers (2)

iLyas
iLyas

Reputation: 1091

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>

Upvotes: 1

pid
pid

Reputation: 11607

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.

Upvotes: 0

Related Questions