將圖像上載到畫布並顯示在新頁面

當前，我們有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;

是否有任何想法，以顯示從畫布上的圖像，然後顯示同一圖像在不同的新標籤頁中的另一個畫布上？

謝謝

來源

2017-10-11 NPE

你爲什麼不只是通過圖片的鏈接？ –

你爲什麼在畫布上畫畫？你只是想要一個上傳的圖像出現在頁面上？ – 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; 
};

來源

2017-10-11 10:39:19 NPE

這裏的例子來完成：

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

來源

2017-10-11 11:11:46 PHPglue

將圖像上載到畫布並顯示在新頁面

回答

相關問題