我想裁剪，旋转，倾斜上方带有框架的图像；有可能使用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>
没有找到相关结果
已邀请:
5 个回复
傻寺俊擒
懊毁暗
琶竞捆栓
漂截嘘
搁手