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

Posted 2023-02-25

【中文标题】无法使用正确的位置或原始 x,y 裁剪图像。

【英文标题】：Cannot crop the image with correct location or original x,y.

【发布时间】：2013-03-06 04:38:45

【问题描述】：

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

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

【问题讨论】：

这可能是你想要的，看[这个][1][1]：***.com/questions/4200374/…

显示什么警报？

它显示了顶部、左侧、宽度、高度的警报，它显示了我要裁剪的位置的正确值，但是当我裁剪图像时位置错误。

你看过this和this

你能告诉我更多细节吗？或者你能告诉我我的编码有什么问题吗？

【参考方案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

【讨论】：

谢谢...但是这个演示对我不起作用，因为我想使用裁剪工具来裁剪图像，而不是为它定义值。

好的，您可以查看http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/ 了解更多信息。正如您所说您正在使用裁剪图像工具，您需要获取初始坐标（左上）和结束（右下）坐标并从中动态计算高度和宽度。然后只需在画布上绘制它。您可以设置绘图原点以更好地放置。

我想你还是不明白我的目的。例如：我有一个裁剪工具，我想裁剪我想要裁剪的位置，但是当我在顶部 80、左侧 100、宽度 80、高度 80 的位置进行裁剪时，它意外地显示了与我不同位置的裁剪位置有庄稼。我的代码如上。我真的需要你的帮助。谢谢。

请查看updated plunker demo。我希望这对你有帮助

对不起，先生，你能给一个非常清晰的样品吗，我对这个太新了。谢谢。