|
@@ -402,6 +402,13 @@ $(document).ready(() => {
|
|
|
reLoadDetailData();
|
|
|
});
|
|
|
|
|
|
+ function setdraggrable(){
|
|
|
+ $( ".img-item" ).draggable({ containment: "parent" },{stop: function( event, ui ) {
|
|
|
+ }}).resizable({ containment: "parent" },{ handles: 'n, e, s, w, ne, se, sw, nw' },{ maxWidth: parseFloat($('#imgwidth').val())},{maxHeight: parseFloat($('#imgheight').val())},{
|
|
|
+ stop: function( event, ui ) {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
// 草图相关
|
|
|
// 移动图片
|
|
@@ -444,20 +451,21 @@ $(document).ready(() => {
|
|
|
// 加载草图组成
|
|
|
$('#edit-img').on('show.bs.modal', function () {
|
|
|
const data = getSelectDetailData();
|
|
|
- const items = JSON.parse(data.calc_img_org) || [];
|
|
|
+ const items = data.calc_img_org !== undefined ? JSON.parse(data.calc_img_org) : [];
|
|
|
const html = [];
|
|
|
for (const item of items) {
|
|
|
- const itemStyle = 'top:' + item.top + ';' + 'left:' + item.left + ';';
|
|
|
+ const itemStyle = 'top:' + item.top + ';' + 'left:' + item.left + ';' + 'width:' + item.width + ';' + 'height:' + item.height + ';';
|
|
|
html.push('<div class="img-item" style="' + itemStyle + '">');
|
|
|
html.push('<div class="img-bar">');
|
|
|
html.push('<a href="javascript: void(0);" class="text-danger" title="删除"><i class="fa fa-remove"></i></a>');
|
|
|
html.push('</div>');
|
|
|
- html.push('<img src="', item.src, '" id="draggable">');
|
|
|
+ html.push('<div class="focus" style="width:100%; height:100%"><img src="', item.src, '" id="draggable" style="width:100%; height:100%"></div>');
|
|
|
html.push('</div>');
|
|
|
}
|
|
|
$('.img-view').html(html.join(''));
|
|
|
- $('.img-item').mousedown(moveImageItem);
|
|
|
+ // $('.img-item').mousedown(moveImageItem);
|
|
|
$('.img-bar').click(removeImageItem);
|
|
|
+ setdraggrable();
|
|
|
});
|
|
|
// 上传图片
|
|
|
$('#upload-img').click(function () {
|
|
@@ -473,11 +481,12 @@ $(document).ready(() => {
|
|
|
html.push('<div class="img-bar">');
|
|
|
html.push('<a href="" class="text-danger" title="删除"><i class="fa fa-remove"></i></a>');
|
|
|
html.push('</div>');
|
|
|
- html.push('<img src="', '/' + result, '" id="draggable">');
|
|
|
+ html.push('<div class="focus" style="width:100%; height:100%"><img src="', '/' + result, '" id="draggable" style="width:100%; height:100%"></div>');
|
|
|
html.push('</div>');
|
|
|
$('.img-view').append(html.join(''));
|
|
|
- $('.img-item').mousedown(moveImageItem);
|
|
|
+ // $('.img-item').mousedown(moveImageItem);
|
|
|
$('.img-bar').click(removeImageItem);
|
|
|
+ setdraggrable();
|
|
|
});
|
|
|
}
|
|
|
});
|
|
@@ -493,6 +502,8 @@ $(document).ready(() => {
|
|
|
src: $('img', item).attr('src'),
|
|
|
left: item.style.left,
|
|
|
top: item.style.top,
|
|
|
+ width: item.style.width,
|
|
|
+ height: item.style.height,
|
|
|
};
|
|
|
itemInfo.push(itemData);
|
|
|
}
|
|
@@ -521,6 +532,7 @@ $(document).ready(() => {
|
|
|
}
|
|
|
updateData.img = canvas.toDataURL('image/jpeg');
|
|
|
updateData.imgInfo = itemInfo;
|
|
|
+ console.log(updateData);
|
|
|
postData(window.location.pathname + '/merge-img', updateData, function (result) {
|
|
|
_.assign(data, result);
|
|
|
$('#calc-img').html('<img src="/' + data.calc_img + '" class="d-100" width="100%">');
|
|
@@ -534,4 +546,4 @@ $(document).ready(() => {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
-});
|
|
|
+});
|