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的事件变量（无论你想要什么）。

demontraiton

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

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

1 个答案: