customized-fabric 1.1.4 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -17,10 +17,12 @@ export default class ImagePlaceholder extends fabric.Group {
|
|
|
17
17
|
isAdditional?: boolean;
|
|
18
18
|
loadImageFromFile?: (imageFile: File) => void;
|
|
19
19
|
loadImageFromUrl?: (imageUrl: string) => void;
|
|
20
|
+
loadUploadedImage?: (imageFile: File) => Promise<fabric.Image>;
|
|
20
21
|
getSettings?: (attribute: string) => any;
|
|
21
22
|
setSizes?: (options: {
|
|
22
23
|
width?: number;
|
|
23
24
|
height?: number;
|
|
24
25
|
}) => void;
|
|
26
|
+
toImageObject?: () => object;
|
|
25
27
|
constructor(options?: IImagePlaceholderOptions);
|
|
26
28
|
}
|
|
@@ -97,28 +97,67 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
|
97
97
|
getSettings: function (attribute) {
|
|
98
98
|
return this.get(attribute);
|
|
99
99
|
},
|
|
100
|
-
loadUploadedImage: function (
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
100
|
+
loadUploadedImage: async function (image) {
|
|
101
|
+
let loadedImage = undefined;
|
|
102
|
+
if (image instanceof File) {
|
|
103
|
+
loadedImage = await (0, utils_1.loadImageFromFile)(image);
|
|
104
|
+
}
|
|
105
|
+
else if (typeof image == "string") {
|
|
106
|
+
loadedImage = await (0, utils_1.loadImageFromUrl)(image);
|
|
107
|
+
}
|
|
108
|
+
const clipPath = new fabric_1.fabric.Rect({
|
|
109
|
+
width: this.width,
|
|
110
|
+
height: this.height,
|
|
111
|
+
top: this.top,
|
|
112
|
+
left: this.left,
|
|
113
|
+
absolutePositioned: true,
|
|
114
|
+
});
|
|
115
|
+
if (loadedImage) {
|
|
116
|
+
loadedImage.set({
|
|
117
|
+
originX: "left",
|
|
118
|
+
originY: "top",
|
|
105
119
|
top: this.top,
|
|
106
120
|
left: this.left,
|
|
107
|
-
|
|
121
|
+
clipPath: clipPath,
|
|
108
122
|
});
|
|
109
|
-
loadedImage.set({ top: this.top, left: this.left, clipPath: clipPath });
|
|
110
123
|
this.fitImage(loadedImage);
|
|
111
124
|
this.uploadedImage = loadedImage;
|
|
112
125
|
const canvas = this?.canvas;
|
|
113
126
|
canvas?.add(this.uploadedImage);
|
|
114
127
|
canvas?.renderAll();
|
|
115
|
-
}
|
|
128
|
+
}
|
|
129
|
+
return this.uploadedImage;
|
|
116
130
|
},
|
|
117
131
|
removeUploadedImage: function () {
|
|
118
132
|
const canvas = this?.canvas;
|
|
119
133
|
canvas?.remove(this.uploadedImage);
|
|
134
|
+
this.uploadedImage = undefined;
|
|
120
135
|
canvas?.renderAll();
|
|
121
136
|
},
|
|
137
|
+
toImageObject: function () {
|
|
138
|
+
if (this.uploadedImage) {
|
|
139
|
+
const { originX, originY, left = 0, top = 0, width, height, scaleX, scaleY, angle, flipX, flipY, skewX, skewY, opacity, } = this.uploadedImage;
|
|
140
|
+
return {
|
|
141
|
+
originX,
|
|
142
|
+
originY,
|
|
143
|
+
left: left - this.left,
|
|
144
|
+
top: top - this.top,
|
|
145
|
+
width,
|
|
146
|
+
height,
|
|
147
|
+
scaleX,
|
|
148
|
+
scaleY,
|
|
149
|
+
angle,
|
|
150
|
+
flipX,
|
|
151
|
+
flipY,
|
|
152
|
+
skewX,
|
|
153
|
+
skewY,
|
|
154
|
+
opacity,
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
else {
|
|
158
|
+
return {};
|
|
159
|
+
}
|
|
160
|
+
},
|
|
122
161
|
});
|
|
123
162
|
const toImagePlaceholderObject = (imagePlaceholderObject) => {
|
|
124
163
|
return {
|