3

jQuery AJAX Form プラグインを使用して、ページを更新せずに画像をアップロードしています。アップロードされた画像をイメージタグ内に表示すればOKです（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プロセスが完了したときに呼び出すときのコールバック関数(内部)です。役立つ回答をありがとう。

更新: 完全なコード

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

2 に答える 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 request を記述する必要さえありません。

于 2013-08-04T07:42:56.453 に答える
0

間違った機能を使用しています。

context.putImageData(imgData,x,y);

画像オブジェクトではなく生のピクセルデータである画像データを取ります。代わりに、次を使用します。

context.drawImage(img,0,0);

それはあなたの問題を解決するはずです

于 2012-06-01T14:09:48.327 に答える