Question

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

我可以平移和缩放，并将脸部设置在画面上（空白/透明面）。用户还可以查看图像。

我最终想要做的是保存面部的最终图像用户已选择，但图像应为单个图像，其中包含Frame + User的面部 - 可见面部外的区域。

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

请建议我可以这样做的方法。示例很棒，但它们应该在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>

Answer 1

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

Answer 2

使用jQuery / javascript进行图像处理是不可能的。你必须让服务器参与其中。

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

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

Answer 3

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

Answer 4

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

Answer 5

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

我想裁剪，旋转，歪斜图像，上面有一个框架;是否可以使用jQuery？

5 个答案: