@lemonadejs/cropper 6.0.0 → 6.0.1
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.
- package/README.md +9 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,7 +15,6 @@ A lightweight, powerful **JavaScript image cropper** and photo editor component
|
|
|
15
15
|
- **TypeScript Support**: Full TypeScript definitions included
|
|
16
16
|
- **Framework Integration**: Works with vanilla JavaScript, React, Vue, and any modern framework
|
|
17
17
|
|
|
18
|
-
|
|
19
18
|
## Installation
|
|
20
19
|
|
|
21
20
|
### NPM Installation
|
|
@@ -35,7 +34,7 @@ npm install @lemonadejs/cropper
|
|
|
35
34
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.css" />
|
|
36
35
|
|
|
37
36
|
<!-- LemonadeJS Cropper Plugin -->
|
|
38
|
-
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/index.js"></script>
|
|
37
|
+
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/index.min.js"></script>
|
|
39
38
|
```
|
|
40
39
|
|
|
41
40
|
## Quick Start Example
|
|
@@ -49,7 +48,7 @@ npm install @lemonadejs/cropper
|
|
|
49
48
|
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
50
49
|
<script src="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.js"></script>
|
|
51
50
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/cropper/cropper.min.css" />
|
|
52
|
-
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/index.js"></script>
|
|
51
|
+
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/cropper/dist/index.min.js"></script>
|
|
53
52
|
</head>
|
|
54
53
|
<body>
|
|
55
54
|
<div id="root"></div>
|
|
@@ -146,7 +145,7 @@ cropper.setValue({
|
|
|
146
145
|
// Get cropped image data
|
|
147
146
|
const imageData = cropper.getValue();
|
|
148
147
|
console.log(imageData);
|
|
149
|
-
// Output:
|
|
148
|
+
// Output: { file: 'blob:...', content: 'data:image/png;base64,...', extension: 'png' }
|
|
150
149
|
```
|
|
151
150
|
|
|
152
151
|
## Usage Examples
|
|
@@ -164,9 +163,9 @@ const profileCropper = Cropper(document.getElementById('profile-editor'), {
|
|
|
164
163
|
async function uploadProfilePicture() {
|
|
165
164
|
const data = profileCropper.getValue();
|
|
166
165
|
|
|
167
|
-
if (data && data
|
|
166
|
+
if (data && data.content) {
|
|
168
167
|
const formData = new FormData();
|
|
169
|
-
const response = await fetch(data
|
|
168
|
+
const response = await fetch(data.content);
|
|
170
169
|
const blob = await response.blob();
|
|
171
170
|
formData.append('profile_picture', blob, 'profile.png');
|
|
172
171
|
|
|
@@ -252,7 +251,7 @@ cropper.setValue(null);
|
|
|
252
251
|
```
|
|
253
252
|
|
|
254
253
|
**Parameters:**
|
|
255
|
-
- `data` (string | ImageData | null): Image URL, data object,
|
|
254
|
+
- `data` (string | ImageData | null): Image URL, data object, or null to clear
|
|
256
255
|
|
|
257
256
|
#### open()
|
|
258
257
|
Programmatically open the cropper modal interface.
|
|
@@ -265,18 +264,14 @@ cropper.open();
|
|
|
265
264
|
Launch the file picker modal to allow users to select a new photo.
|
|
266
265
|
|
|
267
266
|
```javascript
|
|
268
|
-
|
|
269
|
-
document.querySelector('.upload-btn').addEventListener('click', () => {
|
|
270
|
-
// Note: This is handled internally by the cropper UI
|
|
271
|
-
});
|
|
267
|
+
cropper.uploadPhoto();
|
|
272
268
|
```
|
|
273
269
|
|
|
274
270
|
#### deletePhoto()
|
|
275
271
|
Remove the current image from the cropper container.
|
|
276
272
|
|
|
277
273
|
```javascript
|
|
278
|
-
|
|
279
|
-
// The cropper automatically resets when the image is deleted
|
|
274
|
+
cropper.deletePhoto();
|
|
280
275
|
```
|
|
281
276
|
|
|
282
277
|
#### setControls(state)
|
|
@@ -324,7 +319,7 @@ MIT License
|
|
|
324
319
|
|
|
325
320
|
## Support & Community
|
|
326
321
|
|
|
327
|
-
- **Documentation**: [https://lemonadejs.com/plugins/cropper](https://lemonadejs.com/plugins/cropper)
|
|
322
|
+
- **Documentation**: [https://lemonadejs.com/docs/plugins/image-cropper](https://lemonadejs.com/docs/plugins/image-cropper)
|
|
328
323
|
- **GitHub Issues**: Report bugs and request features
|
|
329
324
|
- **Community**: Join our community for support and discussions
|
|
330
325
|
- **Website**: [https://lemonadejs.com](https://lemonadejs.com)
|
|
@@ -332,4 +327,3 @@ MIT License
|
|
|
332
327
|
## Contributing
|
|
333
328
|
|
|
334
329
|
Contributions are welcome! Please feel free to submit pull requests or open issues.
|
|
335
|
-
|
package/package.json
CHANGED