0

So I'm just trying to make an easy, auto way to download comic book pages from the site readallcomics.com and I've been running into the CORS issue since the site loads all the images from a different domain. I tried changing the cross origin of the image to anonymous but it doesn't work and I've gone as far as to basically make my own comic viewer loading all the pages into a canvas. I'm just wondering if there is anyway to get around this that I can't find. Would running a node server and having it grab the images and then loading the images to the canvas from the server work? Is there a faster way to download them in bulk that I don't know about? Any help would be appreciated thank you.

<button id="generateButton">Generate Comic</button>
<button id="nextButton">Next Page</button>
<a id="downloadButton">Download Page</a>

<canvas id="canvas">Sorry, no canvas available</canvas>

<script>
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
    img = new Image();
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

// I go to the site and use console to grab an array of the pages then use console to put them in this array before generating canvas
var links;
var currentPage = 0;

var desiredWidth = 1000;
var desiredHeight;

function scaleImageProportionally(width, height){
    var ratio = desiredWidth / width;
    desiredHeight = height * ratio;
}

function displayPage(image) {
    ctx.imageSmoothingEnabled = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    scaleImageProportionally(image.width, image.height);
    canvas.height = desiredHeight;
    ctx.drawImage(image, 0, 0, desiredWidth, desiredHeight);
}

document.getElementById('generateButton').addEventListener('click', function() {
    img.onload = function() {
        displayPage(img);
    }
    img.src = links[0];
    currentPage = 0;
}, false);

document.getElementById('nextButton').addEventListener('click', function() {
    if(currentPage != links.length) {
        img.onload = function() {
            displayPage(img);
        }
        currentPage++;
        img.src = links[currentPage];
    }
}, false);

function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}   

document.getElementById('downloadButton').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', `${currentPage}.png`);
}, false);

</script>
  • The whole point of CORS is that the header **has to be set by the server** and not by the client, otherwise there’s no point in doing so. The server controls the content and therefore is the one setting the header. A way to get around this is to use your own server to proxy the images so that you emit the correct CORS header. – Terry Aug 14 '21 at 22:25
  • Does this answer your question? [Canvas image crossplatform insecure error](https://stackoverflow.com/questions/34743987/canvas-image-crossplatform-insecure-error) – fabian Aug 14 '21 at 22:43

0 Answers0