当前,我们有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;
};