无法使用正确的位置或原始 x,y 裁剪图像。

Question

我可以获取顶部、左侧、宽度、高度的位置，但我无法裁剪为警报显示。

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

Answer 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 文档，请转到我在评论中发布的链接。我希望现在清楚我如何获得裁剪的确切位置。

这是一个工作演示 click here