将上传的图像(使用Ajax)绘制到画布
将上传的图像(使用Ajax)绘制到画布
提问于 2012-06-01 22:03:54
我正在使用jQuery AJAX表单插件上传图像，而无需刷新页面。如果我在一个image标签中显示上传的图片(将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>回答 2
Stack Overflow用户
发布于 2013-08-04 15:42:56
为什么你不能自动请求镜像呢？
与中一样，将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请求。
Stack Overflow用户
发布于 2012-06-01 22:09:48
你使用了错误的函数。
context.putImageData(imgData,x,y);它获取图像数据，这些数据不是图像对象，而是原始像素数据。相反，您希望使用：
context.drawImage(img,0,0);它应该能解决你的问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10851756
复制相关文章
相似问题
腾讯云开发者
