将图像上传到画布并在新选项卡中显示答案

【问题标题】：Upload image to canvas and show in new tab将图像上传到画布并在新选项卡中显示
【发布时间】：2026-01-15 21:55:02
【问题描述】：

目前，我们有 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;

有没有办法从画布显示图像，然后在不同的新标签页中的另一个画布上显示相同的图像？

谢谢

【问题讨论】：

为什么不直接传图片的链接呢？
你为什么要在画布上画画？您是否只想让上传的图片显示在页面上？
@MarcoSalerno 我没有将该图像上传到服务器，只是为了预览。
我觉得这个逻辑反正是错的……
不需要放在画布上。如果您只是将reader.onload 中的event.target.result（或this.result）分配给img.src，那么您就完成了。 img.src = this.result;

标签： javascript jquery html canvas

【解决方案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;
};

【讨论】：

【解决方案2】：

示例如下：

上传.php

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Upload Window</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='upload.js'></script>
  </head>
  <body>
    <div class='main'>
      <form id='frm' name='frm'>
        <input id='up' name='up' type='file' />
        <input id='pv' name='pv' type='button' value='preview' />
      </form>
      <div id='output'></div>
    </div>
  </body>
</html>

otherwindow.php

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Other Window</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
  </head>
  <body>
    <div class='main'>
      <img id='output' />
    </div>
  </body>
</html>

upload.js

$(function(){
var w, r;
$('#frm').submit(function(e){
  e.preventDefault();
}
$('#up').change(function(){
  var t = $(this), fl = t.prop('files')[0];
  if(fl.type.match(/^image\//i)){
    var f = new FileReader;
    f.onload = function(){
      var img = document.createElement('image');
      r = img.src = this.result; $('#output').html(img);
    }
    f.readAsDataURL(fl);
  }
});
$('#pv').click(function(){
  if(r){
    if(!w){
      w = open('otherwindow.php', 'Other Window');
    }
    w.$('#output').attr('src', r);
  }
});
});

【讨论】：