Скопируйте изображение Canvas программно в двоичном формате (не HTML) - PullRequest
0 голосов
/ 20 марта 2019

Допустим, у меня есть следующий холст. Я могу скопировать изображение Canvas программно в формате HTML с помощью этого кода:

window.onload = function() {
  myCanvas = document.getElementById("myCanvas");
  ctx = myCanvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(20, 100);
  ctx.lineTo(70, 100);
  ctx.strokeStyle = "red";
  ctx.stroke();
}

myCanvas.onclick = function() {
  // Copying Canvas Image code
    // get Canvas image binary data
      temp_img_dataURI = myCanvas.toDataURL('image/jpeg');
    // copy image to clipboard (HTML format)
      copyImageToClipboard(temp_img_dataURI);

  alert("image copied!")
}

// A function that copies image data to clipboard (in HTML format, not binary)
  function copyImageToClipboard(url) {
    // prepare temp_img
      var temp_img = document.createElement("img");
      temp_img.src=url;

    // prepare temp_div
      var temp_div = document.createElement('div');
      // temp_div.style = "position: absolute; left: -1000px; top: -1000px";
      temp_div.contentEditable = true;
      temp_div.appendChild(temp_img);
      document.body.appendChild(temp_div);

    // selecting the image
      SelectText(temp_div);
      document.execCommand('copy');
      document.body.removeChild(temp_div);
  }
  
// Helper function for copyImageToClipboard()
  function SelectText(element) {
    var doc = document;
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
  }

  // copyImageToClipboard() function is a modified snippet from this answer: https://stackoverflow.com/a/45582858/3503851
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Что я ищу, чтобы программно скопировать изображение в двоичном формате (не в формате HTML). Это позволит скопировать скопированное изображение в программное обеспечение для редактирования изображений (например, Paint).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...