Как сохранить изображение исправленное в canvas с чужого сервера?
Есть вот такой простой пример.
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'https://placebear.com/640/360';
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
var isDrawing = false;
canvas.addEventListener('mousedown', function(e) {
isDrawing = true;
draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
});
canvas.addEventListener('mousemove', function(e) {
if (isDrawing) {
draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
});
canvas.addEventListener('mouseup', function() {
isDrawing = false;
ctx.beginPath();
});
function draw(x, y) {
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
function downloadImage(format) {
var imageData = canvas.toDataURL('image/' + format);
var link = document.createElement('a');
link.href = imageData;
link.download = 'image.' + format;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
document.getElementById('btn_jpg').addEventListener('click', function() {
downloadImage('jpg');
})
});
<canvas id="canvas"></canvas>
<div class="buttons">
<button id="btn_jpg" class="btn" type="button">Downloads JPG</button>
<button id="btn_pdf" class="btn" type="button">Downloads PDF</button>
</div>
Идея состоит в том, что в окне задаётся изображение с чужого сервера, дальше на нём делаются некие правки при помощи инструментов canvas и уже исправленное изображение необходимо сохранить к себе на локальний диск в указанном формате. Подскажите, пожалуйста, как это организовать не скачивая изображение на свой сервер?