将图像上载到画布并显示在新页面

问题描述：

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

@MarcoSalerno我没有上传该图像到服务器，只是预览。 – NPE

答

首先，感谢他的想法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; 
};

答

这里的例子来完成：

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

将图像上载到画布并显示在新页面

相关推荐