Javascript 如何从HTML5画布创建单个PNG img？

我正在开发一个网站，用户可以选择多个艺术品并购买它们进行预览

我决定将这些选定的艺术品图像放入一个容器（“附加”）中，然后将它们移动到画布（“画布”）中。到目前为止还不错

但我面临的问题是，我无法将画布转换为单个PNG图像（“结果”）。我需要这样做，以便将该图像放置在购物车中

除了（“结果”）部分，其他一切都很好（我认为）

请让我知道我能做些什么来解决这个问题。谢谢大家!

这是一把小提琴

以下是简化代码：

HTML

<p>Images</p>
<label class="image">
  <input type="checkbox" name="1">
  <img src="https://via.placeholder.com/150/5E2BFF/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="2">
  <img src="https://via.placeholder.com/150/49D49D/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="3">
  <img src="https://via.placeholder.com/150/F9C80E/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="4">
  <img src="https://via.placeholder.com/150/1098F7/FFFFFF?">
</label>
<label class="image">
  <input type="checkbox" name="5">
  <img src="https://via.placeholder.com/150/ED254E/FFFFFF?">
</label>

<div class="container">
  <div><p>Append</p><div class="appended"></div></div>
  <div><p>Canvas</p><canvas id="canvas" width="100" height="100"></canvas></div>
  <div><p>Result</p><div class="result"></div></div>
</div>

Jquery/Javascript

$("input:checkbox").on("change", function() {
    
  // Checkboxes
  if ($('input[type="checkbox"]:checked').length >= 4) {
    $('input[type="checkbox"]').not(':checked').prop('disabled', true);
  } else {
    $('input[type="checkbox"]').not(':checked').prop('disabled', false);
  }

  if ($(this).prop('checked') == true) {
    $(this).siblings("img").clone().appendTo(".appended").addClass("new" + $(this).attr('name'));
    $(".new" + $(this).attr('name') + " input").remove();
  }
  if ($(this).prop('checked') == false) {
    $(".new" + $(this).attr('name')).remove();
  }
    
  // Canvas
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var img1 = document.querySelector(".appended img:nth-child(1)");
  var img2 = document.querySelector(".appended img:nth-child(2)");
  var img3 = document.querySelector(".appended img:nth-child(3)");
  var img4 = document.querySelector(".appended img:nth-child(4)");
  canvas.width = 100;
  canvas.height = 100;
  ctx.drawImage(img1, 0, 0, 50, 50);
  ctx.drawImage(img2, 50, 0, 50, 50);
  ctx.drawImage(img3, 0, 50, 50, 50);
  ctx.drawImage(img4, 50, 50, 50, 50);
  
  // Result
  var target = new Image();
  target.src = canvas.toDataURL('image/png');
  $('.result').append(target);

});

---

@现在这是不可能的。它将抛出安全错误。

$("input:checkbox").on("change", function() {
    
  // Checkboxes
  if ($('input[type="checkbox"]:checked').length >= 4) {
    $('input[type="checkbox"]').not(':checked').prop('disabled', true);
  } else {
    $('input[type="checkbox"]').not(':checked').prop('disabled', false);
  }

  if ($(this).prop('checked') == true) {
    $(this).siblings("img").clone().appendTo(".appended").addClass("new" + $(this).attr('name'));
    $(".new" + $(this).attr('name') + " input").remove();
  }
  if ($(this).prop('checked') == false) {
    $(".new" + $(this).attr('name')).remove();
  }
    
  // Canvas
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var img1 = document.querySelector(".appended img:nth-child(1)");
  var img2 = document.querySelector(".appended img:nth-child(2)");
  var img3 = document.querySelector(".appended img:nth-child(3)");
  var img4 = document.querySelector(".appended img:nth-child(4)");
  canvas.width = 100;
  canvas.height = 100;
  ctx.drawImage(img1, 0, 0, 50, 50);
  ctx.drawImage(img2, 50, 0, 50, 50);
  ctx.drawImage(img3, 0, 50, 50, 50);
  ctx.drawImage(img4, 50, 50, 50, 50);
  
  // Result
  var target = new Image();
  target.src = canvas.toDataURL('image/png');
  $('.result').append(target);

});