将上传的图像（使用Ajax）绘制到Canvas

我使用jQuery AJAX Form插件上传图像而不刷新页面。 如果我在图像标签中显示上传的图像（将src设置为上传的图像路径），则可以。但是，我无法在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进程完成时调用时，上面是我的回调函数（内部）。 谢谢你的任何有用的答案。

更新：完整代码

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

Answer 1

你使用的是错误的function。

 context.putImageData(imgData,x,y); 

它需要图像数据，它不是图像对象而是原始像素数据。 相反，您想要使用：

 context.drawImage(img,0,0); 

它应该解决你的问题

Answer 2

您有没有理由不对图像进行自动请求？

如同将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（ “图像/ example_image.jpg”）;

所以jquery ajax请求甚至不需要写。