Skip to content

F
founder_vue
Commit 6435f909 by 张超军
Options

剪裁修改

parent 7c0217bb
Showing with 143 additions and 40 deletions
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-21 15:28:28
* @LastEditTime: 2021-12-21 17:48:08
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -1330,10 +1330,6 @@ export default {
console.log("恢复");
imageEditor.discardSelection();
imageEditor.redo();
// if (!$(this).hasClass("disabled")) {
// imageEditor.discardSelection();
// imageEditor.redo();
// }
});
$(".tui-image-editor").mouseup(function (e) {
......@@ -2194,19 +2190,20 @@ export default {
// 导入图片成功，可以保存入库
self.bcrkActive = false
console.log(result);
// 更新newHeight和newWidth
self.newHeight = result.newHeight;
self.newWidth = result.newWidth;
console.log((512 * 670) / self.newHeight);
// 更改canvas图层的宽高样式适配
if (self.newHeight >= self.newWidth) {
document.getElementsByTagName('body')[0].style.setProperty('--canvasHeight', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--canvasWidth', 'auto');
self.maxCanvasHeightOrWidth = self.canvasHeight
self.minCanvasHeightOrWidth = self.canvasWidth
document.getElementsByTagName('body')[0].style.setProperty('--previewHeight', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--previewWidth', 'auto');
} else {
document.getElementsByTagName('body')[0].style.setProperty('--canvasWidth', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--canvasHeight', 'auto');
self.maxCanvasHeightOrWidth = self.canvasWidth
self.minCanvasHeightOrWidth = self.canvasHeight
document.getElementsByTagName('body')[0].style.setProperty('--previewHeight', 'auto');
document.getElementsByTagName('body')[0].style.setProperty('--previewWidth', '100%');
}
// 记录canvas的宽度和高度
......@@ -4271,10 +4268,111 @@ export default {
console.log(self.newWidth);
},
/**
* @description: 裁剪
* @param {*}
* @return {*}
*/
cutImage () {
let self = this
// 预览框的宽高
let small_drawing_width = $('.small-drawing').width()
let small_drawing_height = $('.small-drawing').height()
// 图片的宽高
let small_drawing_img_width = $('.small-drawing-img').width()
let small_drawing_img_height = $('.small-drawing-img').height()
// 计算两者之间的差值
let distance_width = (small_drawing_width - small_drawing_img_width) / 2
let distance_height = (small_drawing_height - small_drawing_img_height) / 2
// 预览移动框的left和top
// crop_left crop_top
// 计算两者之键的差值 --- 移动框的相对于(预览)图片的left和top
let small_pic_left = self.crop_left - distance_width
let small_pic_top = self.crop_top - distance_height
// 预览框的宽高
let w = $("#blc_small").width()
let h = $("#blc_small").height()
console.log("left:", small_pic_left * self.newWidth / small_drawing_img_width);
console.log("top:", small_pic_top * self.newHeight / small_drawing_img_height);
console.log(w);
console.log(h);
console.log("width:", (w * self.newHeight) / small_drawing_height);
console.log("height:", (h * self.newHeight) / small_drawing_height);
// console.log((w * self.newHeight) / 180);
// console.log((h * self.newHeight) / 180);
this.imageEditor.zoom({
x: 0,
y: 0,
zoomLevel: 1
});
this.imageEditor._graphics.setImageProperties(
{
left: 0,
top: 0,
originX: "left",
originY: "top"
},
true
);
let canvasImage = self.imageEditor._graphics.getCanvasImage();
self.left =
(Math.ceil(
$("#blc")
.css("left")
.substring(0, $("#blc").css("left").length - 2)
) *
(self.newHeight / self.canvasHeight)) /
self.bb;
self.top =
(Math.ceil(
$("#blc")
.css("top")
.substring(0, $("#blc").css("top").length - 2)
) *
(self.newHeight / self.canvasHeight)) /
self.bb;
console.log(self.left);
console.log(self.top);
this.imageEditor
.crop({
left: small_pic_left * self.newWidth / small_drawing_img_width,
top: small_pic_top * self.newHeight / small_drawing_img_height,
width: (h * self.newHeight) / small_drawing_height,
height: (h * self.newHeight) / small_drawing_height
// left: 0,
// top: 0,
// width: 1000,
// height: 1000,
}).then(res => {
console.log(res);
self.newHeight = res.newHeight;
self.newWidth = res.newWidth;
// 更改canvas图层的宽高样式适配
if (self.newHeight >= self.newWidth) {
debugger
document.getElementsByTagName('body')[0].style.setProperty('--canvasHeight', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--canvasWidth', 'auto');
document.getElementsByTagName('body')[0].style.setProperty('--previewHeight', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--previewWidth', 'auto');
} else {
document.getElementsByTagName('body')[0].style.setProperty('--canvasWidth', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--canvasHeight', 'auto');
document.getElementsByTagName('body')[0].style.setProperty('--previewHeight', 'auto');
document.getElementsByTagName('body')[0].style.setProperty('--previewWidth', '100%');
}
})
},
/***
* 裁剪
*/
cutImage () {
cutImage2 () {
let self = this;
// console.log(self.crop_left * (self.newHeight / self.canvasHeight));
// console.log(self.crop_top * (self.newHeight / self.canvasHeight));
......@@ -4298,11 +4396,11 @@ export default {
console.log((w * self.newHeight) / 180);
console.log((h * self.newHeight) / 180);
this.imageEditor.zoom({
x: 0,
y: 0,
zoomLevel: 1
});
// this.imageEditor.zoom({
// x: 0,
// y: 0,
// zoomLevel: 1
// });
console.log(self.newHeight);
let canvasImage = self.imageEditor._graphics.getCanvasImage();
......@@ -4970,6 +5068,9 @@ export default {
self.move_left = canvasImage.left;
self.move_top = canvasImage.top;
}
console.log(canvasImage.left);
console.log(canvasImage.top);
console.log(canvasImage.getCenterPoint());
}
};
o.onmouseup = function (e) {
......@@ -5052,6 +5153,10 @@ export default {
$(".blc_small").css("top", (((e.clientY - y) / $(".body-container").width()) * $(".small-drawing").width()) / self.frame_max_bb / self.zoomLevel + self.small_y + "px");
}
}
const canvasImage = self.imageEditor._graphics.getCanvasImage();
console.log(canvasImage.left);
console.log(canvasImage.top);
console.log(canvasImage.getCenterPoint());
};
o.onmouseup = function (e) {
if (e.which === 1) {
......@@ -5174,35 +5279,33 @@ export default {
caclDzwkPos () {
// 小手纹框大小
const canvasImage = this.imageEditor._graphics.getCanvasImage();
const canvasBorder=canvasImage.height>canvasImage.width?canvasImage.height:canvasImage.width;
const xiaoCanvasBorder=$(".small-drawing").width() ;
// 获取小手纹框相对于小图的相对位移
const [xzwkOffsetX, xzwkOffsetY] =
[ $(".blc_small").width() / 2 + $(".blc_small").position().left-xiaoCanvasBorder/ 2,
$(".blc_small").height() / 2 + $(".blc_small").position().top-xiaoCanvasBorder / 2];
// 大手纹框相对大图的位移
const [dswkOffX,dswkOffY]=[xzwkOffsetX / xiaoCanvasBorder * canvasBorder,
xzwkOffsetY / xiaoCanvasBorder * canvasBorder];
//视图框相对大手纹框的位移
const [dzwkOffsetX, dzwkOffsetY] =
[$(".canvas-container").width() / 2-$(".blc").width() / 2 - $(".blc").position().left,
$(".canvas-container").height() / 2-$(".blc").height() / 2 - $(".blc").position().top];
// 手纹框和图片的位移
const [canvasOffsetX, canvasOffsetY] = [dswkOffX-dzwkOffsetX,dswkOffY-dzwkOffsetY]
// 获取小手纹框和小图的相对位移
const [xzwkOffsetX, xzwkOffsetY] = [$(".small-drawing").width() / 2 - $(".blc_small").width() / 2 - $(".blc_small").position().left,
$(".small-drawing").height() / 2 - $(".blc_small").height() / 2 - $(".blc_small").position().top];
//大手纹框和视图框的位移
const [dzwkOffsetX, dzwkOffsetY] = [$(".canvas-container").width() / 2 - $(".blc").width() / 2 - $(".blc").position().left,
$(".canvas-container").height() / 2 - $(".blc").height() / 2 - $(".blc").position().top];
//手纹框和视图框的位移（小图中）
const [xzwkOffsetXMini, xzwkOffsetYMini] = [dzwkOffsetX / $(".canvas-container").width() * $(".small-drawing").width(),
dzwkOffsetY / $(".canvas-container").height() * $(".small-drawing").height()]
//视图框的位移（小图中）
const [viewOffsetX, viewOffsetY] = [xzwkOffsetX + xzwkOffsetXMini, xzwkOffsetY + xzwkOffsetYMini]
console.log($(".small-drawing img").width())
const [canvasOffsetX, canvasOffsetY] = [
(viewOffsetX / $(".small-drawing2 img").width()) *
canvasImage.width,
(viewOffsetY / $(".small-drawing2 img").height()) *
canvasImage.height,
];
// 计算图片原来的偏移量得到不偏移情况的left top 值
const centerP = canvasImage.getCenterPoint();
const [oldCanvasOffsetX, oldCanvasOffsetY] = [
centerP.x-canvasImage.width / 2,
centerP.y-canvasImage.height / 2
];
// 图片原始的left top 值
const [oldCanvasLeft, oldCanvasTop] = [
canvasImage.left- oldCanvasOffsetX,
canvasImage.top-oldCanvasOffsetY ,
centerP.x - canvasImage.width / 2,
centerP.y - canvasImage.height / 2,
];
const [canvasleft, canvastop] = [
oldCanvasLeft - canvasOffsetX ,
oldCanvasTop - canvasOffsetY ,
canvasImage.left + canvasOffsetX - oldCanvasOffsetX,
canvasImage.top + canvasOffsetY - oldCanvasOffsetY,
];
this.imageEditor._graphics.setImageProperties(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment