customized-fabric 1.1.4 → 1.1.5
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?: () => void;
|
|
25
27
|
constructor(options?: IImagePlaceholderOptions);
|
|
26
28
|
}
|
|
@@ -97,28 +97,59 @@ 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 (imageFile) {
|
|
101
|
-
(0, utils_1.loadImageFromFile)(imageFile)
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
100
|
+
loadUploadedImage: async function (imageFile) {
|
|
101
|
+
const loadedImage = await (0, utils_1.loadImageFromFile)(imageFile);
|
|
102
|
+
const clipPath = new fabric_1.fabric.Rect({
|
|
103
|
+
width: this.width,
|
|
104
|
+
height: this.height,
|
|
105
|
+
top: this.top,
|
|
106
|
+
left: this.left,
|
|
107
|
+
absolutePositioned: true,
|
|
108
|
+
});
|
|
109
|
+
loadedImage.set({
|
|
110
|
+
originX: "left",
|
|
111
|
+
originY: "top",
|
|
112
|
+
top: this.top,
|
|
113
|
+
left: this.left,
|
|
114
|
+
clipPath: clipPath,
|
|
115
115
|
});
|
|
116
|
+
this.fitImage(loadedImage);
|
|
117
|
+
this.uploadedImage = loadedImage;
|
|
118
|
+
const canvas = this?.canvas;
|
|
119
|
+
canvas?.add(this.uploadedImage);
|
|
120
|
+
canvas?.renderAll();
|
|
121
|
+
return this.uploadedImage;
|
|
116
122
|
},
|
|
117
123
|
removeUploadedImage: function () {
|
|
118
124
|
const canvas = this?.canvas;
|
|
119
125
|
canvas?.remove(this.uploadedImage);
|
|
126
|
+
this.uploadedImage = undefined;
|
|
120
127
|
canvas?.renderAll();
|
|
121
128
|
},
|
|
129
|
+
toImageObject: function () {
|
|
130
|
+
if (this.uploadedImage) {
|
|
131
|
+
const { originX, originY, left = 0, top = 0, width, height, scaleX, scaleY, angle, flipX, flipY, skewX, skewY, opacity, } = this.uploadedImage;
|
|
132
|
+
return {
|
|
133
|
+
originX,
|
|
134
|
+
originY,
|
|
135
|
+
left: left - this.left,
|
|
136
|
+
top: top - this.top,
|
|
137
|
+
width,
|
|
138
|
+
height,
|
|
139
|
+
scaleX,
|
|
140
|
+
scaleY,
|
|
141
|
+
angle,
|
|
142
|
+
flipX,
|
|
143
|
+
flipY,
|
|
144
|
+
skewX,
|
|
145
|
+
skewY,
|
|
146
|
+
opacity,
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
return {};
|
|
151
|
+
}
|
|
152
|
+
},
|
|
122
153
|
});
|
|
123
154
|
const toImagePlaceholderObject = (imagePlaceholderObject) => {
|
|
124
155
|
return {
|