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>