如何解决我想裁剪,旋转,倾斜上方带有框架的图像;有可能使用jQuery吗?
| 我正在开发一个应用程序,用户可以在其中上载图像并缩放,平移以将图像设置到框架中。 我可以平移和缩放,并将脸部设置在框架上(空白/透明脸部)。用户还能够查看图像。 我最后要做的是保存一张最终的脸部图像, 用户已选择,但是该图像应该是由Frame + User's face-可见面部以外的区域组成的单个图像。 我面临的问题是我无法删除不需要的图像部分。 请给我建议我可以做到的方法。示例很好,但应在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>
解决方法
您实际上无法在javascript / jquery中修改/保存图像(据我所知)。
您将必须使用服务器端图像处理库,例如gdlib(http://www.boutell.com/gd/),通常会默认在php中将其激活,或者将imagemagick(http://www.imagemagick.org /script/index.php)
,您应该尝试获取平移图像的新坐标,并将其传递给服务器端并进行服务器端图像操作。如果使用的是python,则将使用PIL处理图像并将其存储在数据库中。您唯一需要传递的是平移图像到服务器端的新坐标。
,向axzoomer添加一些选项(我打算扩展插件功能)以获取当前尺寸并查看图像的坐标,您可以使用服务器端选项进行图像裁剪。您已经在服务器端拥有了图像,因此您可以通过使用ajax请求仅向服务器发送尺寸(用于调整大小)和坐标(用于随后裁剪),然后在base64字符串中生成新图像,从而在服务器上调整图像的大小。如果直接通过ajax发送,则返回xmlresponse或将其保存在固定文件中,然后通过xmlresponse发送文件的url。这样,您将可以即时获得裁剪图像。
另一种方法可能使用画布。
奥尔本
,不可能使用jQuery / javascript进行图像处理。您必须让服务器参与其中。
我已经在asp.net中完成了此类工作。我的方法包括以下步骤
将图像上传到服务器
显示平移/缩放图像
用户完成设置后,
获取可见图像尺寸
将尺寸发布到服务器
服务器将接收新的矩形点并裁剪图像
(点图框架中GDI +中的位图,图形类)
合并带有裁切图像的框架。
(点网框架中GDI +中的图形类)
,您无法使用Javascript处理图像文件。它需要服务器端脚本的参与才能实现所需的最佳方法(使用Jquery作为客户端,而PHP作为服务器端语言)则必须使用Jcrop插件。最好的裁剪图像插件,并且在他们的源代码中也有一个示例,演示了使用Jcrop和PHP进行图像裁剪的演示。尝试转到Jcrop官方网站。这里是使用服务器端脚本裁剪的示例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。