1

上、左、幅、高さの位置を取得できますが、アラートが示すようにトリミングできません。 

<script>
    $(document).ready(function(e) {
        $("#crop").click(function(){

            var canvas=document.getElementById("Mystore1");
            var context=canvas.getContext("2d");

            var top=$('#face').offset().top;
            var left=$('#face').offset().left;
            var width=$('#face').width();
            var height=$('#face').height();
            alert(top);
            alert(left);
            alert(width);
            alert(height);
            var imageSrc ='../../../Public/Pictures/Sample Pictures/Desert.jpg';                
            var imageObj=new Image();
            imageObj.onload=function(){
                context.drawImage(imageObj, top, left, width, height, top, left, width, height);
            };
            imageObj.src=imageSrc;
        });
    });

</script>
4

1 に答える 1

1

これが実際のデモです。あなたのコードに問題が見つかりました。準備ができた関数パラメーターで、送信する必要が$あり、名前付きのイベント変数をクリックする必要がありますe（必要なものは何でも）。

デモンストレーション

croparea は、トリミング ツールによって選択された顔の領域です。メイン画像は画像部分です。あなたのjsはそうあるべきです

    $(document).ready(function($) {

        $("#crop").click(function(e){
        var Imgwidth = $('#face').width(), 
            Imgheight =  $('#face').height(),
            faceOffset = $('#face').offset(),
            imgOffset = $('#imgHolder').find('img').offset(), 
            imgX1 = faceOffset.left-imgOffset.left,
            imgY1 = faceOffset.top-imgOffset.top,
            imgX2 =imgX1+Imgwidth,
            imgY2 = imgY1+Imgheight;


         var imageSrc ='http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';    
          var imageObj=new Image();
          imageObj.src=imageSrc; 
        selx1 = imgX1;
        sely1 = imgY1;
        selx2 = imgX2;
        sely2 = imgY2;
        selw = Imgwidth;
        selh = Imgheight;
        console.log(imgX1);
        console.log(imgY1);
        /*console.log(imgX2);
        console.log(imgY2);*/
        var canvas=document.getElementById("Mystore1");
        var context=canvas.getContext("2d");
        context.canvas.height = Imgheight;

        context.drawImage(imageObj, imgX1, imgY1, selw, selh, 3, 3, Imgwidth, canvas.height-5);


        });
    });

画像から領域（ここでは#face div）を選択してトリミングすると、この行で選択された領域の左上（X、Y）座標が計算されます

imgX1 = faceOffset.left-imgOffset.left,
imgY1 = faceOffset.top-imgOffset.top,

これらの行の右下の座標

imgX2 =imgX1+Imgwidth,
imgY2 = imgY1+Imgheight;

したがって、トリミングするために選択した画像の部分を描画するための長方形の座標系を取得します。ドキュメントについてdrawImageは、コメントに投稿したリンクにアクセスしてください。トリミングする正確な位置を取得する方法が明確になったことを願っています。

ここに実際のデモがあります ここをクリック

于 2013-03-06T05:16:01.107 に答える