我想裁剪、旋转、倾斜上面有框架的图像；可以使用 jQuery 吗？答案

【问题标题】：I want to crop, rotate, skew an image with a frame above it; is it possible using jQuery?我想裁剪、旋转、倾斜上面有框架的图像；可以使用 jQuery 吗？
【发布时间】：2011-04-14 09:43:52
【问题描述】：

我正在开发一个应用程序，用户可以在其中上传图像并缩放、平移以将图像设置到框架中。

我可以平移和缩放，并将人脸设置在框架上（空白/透明人脸）。用户还能够查看图像。

我最终想要做的是保存一张脸的最终图像用户已选择，但图像应该是由框架 + 用户面部组成的单个图像 - 可见面部之外的区域。

我面临的问题是我无法删除我不想要的图像部分。

请建议我可以做同样的事情。例子很好，但它们应该用 jQuery/JavaScript 实现。

截图：

代码如下：

<html>
<head>
    <script src="file/ga.js" type="text/javascript"></script>
    <script src="file/jquery.js" type="text/javascript"></script>
    <script src="file/jquery-ui.js" type="text/javascript"></script>
    <script src="file/jquery_002.js" type="text/javascript"></script>
    <script src="file/axzoomer.js" type="text/javascript"></script>

    <script type="text/javascript">

    function adjustMe()
    {
        document.getElementById('layer1').style.z-index = -9999999;
    }

    </script>
</head>

    <div style="width: 100%;">
        <div style="position: relative; left: 0px; top: 0px; width: 360px; height: 270px;">

            <div style="width:400px;height:400px; background-image:url('frame.png')">
            </div>  

            <!--* frame comes above */-->


            <div id="layer1" style="position: absolute; left: 30px; top: 40px; width: 360px; height: 270px;">
                <img id="dyn" class="ex ax-zoom" src="peng.jpg" style="width: 360px;opacity: 0.2;filter:alpha(opacity=30); height: 270px; position: absolute; top: 0px; left: 0px;"/>
            </div>
                <div style="display: none; position: absolute; opacity: 0.5; height: 35px; top: 240px; left: 148px;" class="ax-controls">
                    <img style="cursor: pointer;" src="file/zoom-in.png">
                    <img style="cursor: pointer;" src="file/zoom-out.png">

                </div>



        </div>
    </div>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div style="clear:both;">
        <input type="button" value="Done" onclick="adjustMe();"/>
    </div>
    <script type="text/javascript">
    $('.ex').axzoomer({
        'maxZoom':4,
        'zoomIn':'file/zoom-in.png',
        'zoomOut':'file/zoom-out.png',
        'opacity':0.5,
        'sensivity':10
    });


    </script>
</body>

【问题讨论】：

标签： php javascript jquery image-manipulation dom

【解决方案1】：

您实际上无法在 javascript/jquery 中修改/保存图像（据我所知）。您必须使用服务器端图像处理库，例如 gdlib (http://www.boutell.com/gd/)，通常在 php 中默认激活，或者 imagemagick (http://www.imagemagick.org/脚本/index.php)

【讨论】：

【解决方案2】：

您应该尝试获取平移图像的新坐标并将其传递给服务器端并进行服务器端图像处理。如果您使用 python，您将使用 PIL 来操作图像并将其存储在数据库中。您唯一应该将平移图像的新坐标传递到服务器端。

【讨论】：

感谢 Abdul，我使用 flash 开发应用程序。

【解决方案3】：

向axzoomer添加一些选项（我计划扩展插件功能）以获取图像的当前尺寸和视图坐标，您可以使用服务器端选项进行图像裁剪。您已经在服务器端拥有图像，因此您可以通过使用 ajax 请求仅向服务器发送尺寸（用于调整大小）和坐标（用于然后裁剪）来在服务器上调整它的大小，然后在 base64 字符串中生成一个新图像如果通过 ajax 直接发送返回 xmlresponse 或将其保存在固定文件中，然后在 xmlresponse 上发送文件的 url。通过这种方式，您将获得动态裁剪图像。另一种方法可能是使用画布。阿尔班X

【讨论】：

【解决方案4】：

无法使用 jQuery/javascript 进行图像处理。您必须让服务器参与其中。

我在asp.net做过这样的工作。我的方法包括以下步骤

上传图片到服务器
显示图像以进行平移/缩放
当用户完成设置时，
1. 获取可见图像尺寸
2. 将维度发布到服务器
服务器将接收新的矩形点并裁剪图像（点网框架中GDI+中的位图、图形类）
将帧与裁剪后的图像合并。（点网框架中GDI+中的图形类）

【讨论】：

【解决方案5】：

您不能使用 Javascript 操作图像文件它需要服务器端脚本的参与实现所需的最佳方法（使用 Jquery 作为客户端和 PHP 作为服务器端语言）您必须使用 Jcrop 插件这是裁剪图像的最佳插件，他们的源代码中也有一个示例，其中包含使用 Jcrop 和 PHP 进行图像裁剪的演示。尝试转到Jcrop Official website。使用服务器端脚本进行裁剪的示例是Here。

【讨论】：