javascript - 将图像上传到 Canvas 并在新选项卡中显示

Question

目前，我们有 HTML 页面来上传图像并加载到 Canvas 上。

function handleImage2(e) {
  var ctx = canvas2.getContext('2d');
  ctx.fillStyle = 'black';
  ctx.font = "50px Arial";
  ctx.fillText('Loading...', 100, 100);

  var reader = new FileReader();
  reader.onload = function (event) {
    var img = new Image();
    img.onload = function () {
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas2.width, canvas2.height);
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

为了进一步开发，我们希望在不同页面和新选项卡上显示相同的图像。处理流程是当用户单击按钮更多详细信息时，会打开一个新选项卡，其中包含相同的图像和一些信息。

我尝试模拟提交过程到另一个页面并从上一页获取 POST 数据。但这种方法不起作用，导致浏览器很慢，最后什么也没有显示。

var apiForm = document.createElement("form");
apiForm.target = "_blank";    
apiForm.method = "POST";
apiForm.action = "printout.php";

var urlData = document.createElement("input");
urlData.type = "text";
urlData.name = "urlData";
urlData.value = canvasObject.toDataURL("image/png");

apiForm.appendChild(urlData);

document.body.appendChild(apiForm);

apiForm.submit();

在下面的评论中关注@PHPGLue，我已经遵循了他的想法，但仍然不起作用

var canvasObject = document.getElementById("canvas2");
var dataUrl = canvasObject.toDataURL("image/png");

var newWindow = window.open("printout.php", "print preview", "_blank");
newWindow.document.getElementById('canvas2').src = dataUrl;

有什么想法可以显示 Canvas 中的图像，然后在不同的新标签页中的另一个 Canvas 上显示相同的图像吗？

谢谢

Answer 1

首先，感谢 PHPglue 的想法。

这个问题可以用这个方法来完成

var canvasObject = document.getElementById("canvas2");
var dataUrl = canvasObject.toDataURL("image/png");

var newWindow = open("printout.php", "print preview", "_blank");

newWindow.onload = function(){
  var canvasObj = newWindow.document.getElementById('canvas2');
  var ctx = canvasObj.getContext('2d');
  var img = new Image;

  img.onload = function(){
      ctx.drawImage(img, 0, 0);
  }

  img.src = dataUrl;
};