將上傳的圖像（使用Ajax）繪製到Canvas

我使用jQuery AJAX Form插件上傳圖像而不刷新頁面。如果我在圖片標籤中顯示上傳的圖片（將src設置爲上傳的圖片路徑），那就可以了。但是，我無法在畫布元素上繪製上傳的圖片。我其實不知道問題是什麼。將上傳的圖像（使用Ajax）繪製到Canvas

if (isset($_FILES["image"]["name"]) && !empty($_FILES["image"]["name"])) { 
    $filename = $_FILES["image"]["name"]; 
    $tmpname = $_FILES["image"]["tmp_name"]; 

    $location = "uploads/"; 
    move_uploaded_file($tmpname, $location.$filename); 
    echo $location.$filename; 
} else {} 

var canvas = document.getElementById("canv"); 
var contex = canvas.getContext("2d");   
var img = new Image(); 
img.src = responseText; 
img.onload = function(){ contex.putImageData(img, 0, 0); }

上面是我在Ajax過程完成時調用的回調函數（內部）。感謝任何有用的答案。

UPDATE：全碼

<html> 
<head> 
<script src="jq171.js"></script> <!--jQuery--> 
<script src="jqform.js"></script> <!--jQuery ajax Form plugin--> 

<script> 
    $(document).ready(function(){ 
     $("#myform").ajaxForm(function({success: updateSrc}){ 
     }); 
    }); 

    function updateSrc(responseText){ 
     var canvas = document.getElementById("canv"); 
     var contex = canvas.getContext("2d"); 

     var img = new Image(); 
     img.src = responseText; 
     img.onload = function(){ contex.drawImage(img, 0, 0); } 

    } 
</script> 
</head> 
<body> 
<form id="myform" action="this.php" method="post" enctype="multipart/form-data" > 
<canvas id="canv" width="400px" height="400px"></canvas> 
<input type="file" name="image"/> 
<input type="submit"/> 
</form> 
</body> 
</html>

來源

2012-06-01 msharpp

responseText包含哪些內容？ – jazzytomato

它應該包含來自服務器的響應，簡而言之就是上傳的文件路徑。 http://www.malsup.com/jquery/form/#ajaxForm – msharpp

我知道它應該包含什麼，但我要求您打印它實際包含的內容;-)在您的JavaScript回調函數中添加：alert（responseText ）; 然後檢查路徑是否正常。（如果它的相對路徑，那麼它可能是錯誤的，如果你的PHP和JS文件不在同一位置 – jazzytomato

您正在使用錯誤的函數。

context.putImageData(imgData,x,y);

它拍攝圖像數據，它不是圖像對象而是原始像素數據。相反，你要使用：

context.drawImage(img,0,0);

應該解決您的問題

來源

2012-06-01 14:09:48 jazzytomato

無所謂，我之前嘗試過。它不起作用。以下是完整的代碼： – msharpp

請編輯您的答案以發佈完整代碼 – jazzytomato

我更新了包括完整代碼的問題。 – msharpp

是否有一個原因，爲什麼你不只是做了圖像的自動請求？

如休假updateSrc作爲

function updateSrc(imagePath){ 
     var canvas = document.getElementById("canv"); 
     var contex = canvas.getContext("2d"); 

     var img = new Image(); 
     img.src = imagePath; 
     img.onload = function(){ contex.drawImage(img, 0, 0); } 

    }

凡的ImagePath是路徑的圖像文件。例如：

updateSrc（「images/example_image.jpg」）;

因此，jquery ajax請求甚至不需要寫入。

來源

2013-08-04 07:42:56 aaronrmm

將上傳的圖像（使用Ajax）繪製到Canvas

回答

相關問題