Как сохранить изображение исправленное в 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 и уже исправленное изображение необходимо сохранить к себе на локальний диск в указанном формате. Подскажите, пожалуйста, как это организовать не скачивая изображение на свой сервер?


Ответы (0 шт):