Я занимаюсь разработкой приложения, в котором пользователь загружает изображение и увеличивает его, перемещается для установки изображения в рамку.
Я могу выполнять панорамирование и масштабирование, а также установить лицо на рамке (пустое / прозрачное лицо).Пользователь также может просматривать изображения.
В конечном итоге я хочу сохранить окончательное изображение лица, которое выбрал пользователь, но это должно быть одно изображение, состоящее из кадра + лицо пользователя - области за пределами видимого лица.are.
Проблема, с которой я сталкиваюсь, заключается в том, что я не могу удалить ту часть изображения, которая мне не нужна.
Пожалуйста, предложите мне способы, которыми я могу сделать то же самое.Примеры были бы хорошими, но они должны быть реализованы в 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>