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

【问题标题】：Drawing Uploaded Image(with Ajax) to Canvas将上传的图像（使用 Ajax）绘制到 Canvas
【发布时间】：2012-06-06 18:46:03
【问题描述】：

我正在使用 jQuery AJAX 表单插件上传图片而不刷新页面。如果我在图像标签中显示上传的图像（将 src 设置为上传的图像路径）就可以了。但是，我无法在画布元素上绘制该上传的图像。我实际上不知道问题是什么。

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 进程完成时调用的回调函数（内部）。感谢您提供任何有用的答案。

更新：完整代码

<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>

【问题讨论】：

它应该包含来自服务器的响应，简而言之就是上传的文件路径。 malsup.com/jquery/form/#ajaxForm
我知道它应该包含什么，但我要求您打印它实际包含的内容 ;-) 在您的 javascript 回调函数中添加：alert(responseText);然后检查路径是否正常。（如果它的相对路径，那么如果您的 php 和 JS 文件不在同一位置，则可能是错误的
似乎 updateSrc() 函数甚至不起作用。我没有得到警觉。

标签： image jquery canvas

【解决方案1】：

您是否有理由不自动请求图像？

如将 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请求甚至不需要写。

【讨论】：

【解决方案2】：

你使用了错误的功能。

context.putImageData(imgData,x,y);

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

context.drawImage(img,0,0);

应该能解决你的问题

【讨论】：

没关系，我之前试过。这是行不通的。这是完整的代码：