logo标签列表

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

imagejquerycanvas
3

我正在使用jQuery AJAX Form插件在不刷新页面的情况下上传图片。如果我使用标签显示上传的图片(将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>
它应该包含来自服务器的响应，简而言之，上传文件的路径。http://www.malsup.com/jquery/form/#ajaxForm - msharpp
我知道它应该包含什么，但我要求你打印出它实际包含的内容;-) 在你的JavaScript回调函数中添加：alert(responseText); 然后检查路径是否正确。（如果是相对路径，则如果您的PHP和JS文件不在同一位置，则可能会出错） - jazzytomato
updateSrc() 函数似乎根本不起作用。我没有收到警报。 - msharpp
2个回答
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请求甚至不需要编写。
0

您正在使用错误的函数。

context.putImageData(imgData,x,y);

它需要图像数据，这不是一个图像对象，而是原始像素数据。相反，您应该使用：

context.drawImage(img,0,0);

它应该能解决你的问题

不要紧，我之前试过了。它不起作用。这是完整的代码： - msharpp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接