1580158
/
sd-webui-openpose-editor
mirror of https://github.com/huchenlei/sd-webui-openpose-editor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🔨 factor out logic of load JSON person and upload background image

main
huchenlei 2023-05-17 22:39:30 -04:00
parent 0567cff9d5
commit 15cfaab607
1 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/App.vue
View File

@ -482,35 +482,38 @@ export default defineComponent({
handleBeforeUploadImage(file: Blob) {
const reader = new FileReader();
reader.onload = (e) => {
fabric.Image.fromURL(e.target!.result! as string, (img) => {
img.set({
left: 0,
top: 0,
scaleX: 1.0,
scaleY: 1.0,
opacity: 0.5,
hasControls: true,
hasBorders: true,
lockScalingX: false,
lockScalingY: false,
});
this.canvas?.add(img);
// Image should not block skeleton.
this.canvas?.moveTo(img, 0);
this.canvas?.renderAll();
const uploadFile = this.uploadedImageList[this.uploadedImageList.length - 1];
uploadFile.locked = false;
uploadFile.scale = 1.0;
this.canvasImageMap.set(uploadFile.uid, img);
});
this.loadBackgroundImageFromURL(e.target!.result! as string);
};
reader.readAsDataURL(file);
// Return false to prevent the default upload behavior
return false;
},
loadBackgroundImageFromURL(url: string) {
fabric.Image.fromURL(url, (img) => {
img.set({
left: 0,
top: 0,
scaleX: 1.0,
scaleY: 1.0,
opacity: 0.5,
hasControls: true,
hasBorders: true,
lockScalingX: false,
lockScalingY: false,
});
this.canvas?.add(img);
// Image should not block skeleton.
this.canvas?.moveTo(img, 0);
this.canvas?.renderAll();
const uploadFile = this.uploadedImageList[this.uploadedImageList.length - 1];
uploadFile.locked = false;
uploadFile.scale = 1.0;
this.canvasImageMap.set(uploadFile.uid, img);
});
},
isImage(file: UploadFile) {
return /\.(jpeg|jpg|gif|png|bmp)$/i.test(file.name);
},
@ -532,11 +535,6 @@ export default defineComponent({
this.canvas?.renderAll();
},
handleBeforeUploadJson(file: Blob) {
function preprocessPoints(nums: number[], canvasWidth: number, canvasHeight: number): [number, number, number][] {
const points = _.chunk(nums, 3) as [number, number, number][];
return points.map(p => [p[0] * canvasWidth, p[1] * canvasHeight, p[2]]);
}
const reader = new FileReader();
reader.onload = (e) => {
let poseJson: IOpenposeJson;
@ -546,30 +544,36 @@ export default defineComponent({
this.$notify({ title: 'Error', desc: ex.message });
return;
}
const canvasHeight = poseJson.canvas_height;
const canvasWidth = poseJson.canvas_width;
this.canvasHeight = _.max([canvasHeight, this.canvasHeight])!;
this.canvasWidth = _.max([canvasWidth, this.canvasWidth])!;
this.resizeCanvas(this.canvasWidth, this.canvasHeight);
poseJson.people.forEach(personJson => {
this.addPerson(new OpenposePerson(null,
new OpenposeBody(preprocessPoints(personJson.pose_keypoints_2d, canvasWidth, canvasHeight)),
personJson.hand_left_keypoints_2d ?
new OpenposeHand(preprocessPoints(personJson.hand_left_keypoints_2d, canvasWidth, canvasHeight)) : undefined,
personJson.hand_right_keypoints_2d ?
new OpenposeHand(preprocessPoints(personJson.hand_right_keypoints_2d, canvasWidth, canvasHeight)) : undefined,
personJson.face_keypoints_2d ?
new OpenposeFace(preprocessPoints(personJson.face_keypoints_2d, canvasWidth, canvasHeight)) : undefined,
));
});
this.loadPeopleFromJson(poseJson);
};
reader.readAsText(file);
return false;
},
loadPeopleFromJson(poseJson: IOpenposeJson) {
function preprocessPoints(nums: number[], canvasWidth: number, canvasHeight: number): [number, number, number][] {
const points = _.chunk(nums, 3) as [number, number, number][];
return points.map(p => [p[0] * canvasWidth, p[1] * canvasHeight, p[2]]);
}
const canvasHeight = poseJson.canvas_height;
const canvasWidth = poseJson.canvas_width;
this.canvasHeight = _.max([canvasHeight, this.canvasHeight])!;
this.canvasWidth = _.max([canvasWidth, this.canvasWidth])!;
this.resizeCanvas(this.canvasWidth, this.canvasHeight);
poseJson.people.forEach(personJson => {
this.addPerson(new OpenposePerson(null,
new OpenposeBody(preprocessPoints(personJson.pose_keypoints_2d, canvasWidth, canvasHeight)),
personJson.hand_left_keypoints_2d ?
new OpenposeHand(preprocessPoints(personJson.hand_left_keypoints_2d, canvasWidth, canvasHeight)) : undefined,
personJson.hand_right_keypoints_2d ?
new OpenposeHand(preprocessPoints(personJson.hand_right_keypoints_2d, canvasWidth, canvasHeight)) : undefined,
personJson.face_keypoints_2d ?
new OpenposeFace(preprocessPoints(personJson.face_keypoints_2d, canvasWidth, canvasHeight)) : undefined,
));
});
},
downloadCanvasAsJson() {
const data = {
people: [...this.people.values()].map(person => person.toJson()),