当前,我们有HTML页面可以上传图像并加载到画布上。

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]);
}


为了进一步开发,我们希望在不同页面和新标签上显示相同的图像。处理流程是当用户单击按钮more detail时,将打开一个新标签,其中包含相同的图像并附带一些信息。

我尝试模拟将提交过程提交到另一页,并从上一页获取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;


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

谢谢

最佳答案

首先,感谢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;
};

10-05 20:47
查看更多