Question

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

是否有任何想法从画布显示图像，然后在不同的新标签页中的另一个画布上显示相同的图像？

由于

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

Answer 2

以下是示例：

<强> upload.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);
  }
});
});

将图像上传到画布并在新标签中显示

2 个答案: