Spaces:
Running
Running
File size: 4,575 Bytes
7355628 903108a 7355628 903108a 68a8ac1 903108a 7355628 903108a 68a8ac1 903108a 7355628 68a8ac1 903108a 68a8ac1 903108a 68a8ac1 903108a 68a8ac1 903108a 68a8ac1 903108a 7355628 903108a 68a8ac1 7355628 903108a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Toast UI Image Editor</title>
<link
rel="stylesheet"
href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.min.css"
/>
<style>
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
#tui-image-editor { width: 100%; max-width: 700px; height: 500px; }
#status { margin: 10px 0; color: #666; }
.error { color: #d32f2f; }
.success { color: #388e3c; }
</style>
</head>
<body>
<input type="file" id="load-image" accept="image/*" />
<div id="status">Select an image to edit</div>
<div id="tui-image-editor"></div>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.min.js"></script>
<script>
let imageEditor;
let editorReady = false;
function initEditor() {
try {
if (typeof tui === 'undefined' || !tui.ImageEditor) {
throw new Error('Toast UI library failed to load');
}
imageEditor = new tui.ImageEditor('#tui-image-editor', {
includeUI: {
menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
initMenu: '',
uiSize: { width: '700px', height: '500px' },
menuBarPosition: 'bottom'
}
});
editorReady = true;
} catch (err) {
document.getElementById('status').textContent = `Failed to initialize editor: ${err.message}`;
document.getElementById('status').className = 'error';
console.error('Editor initialization error:', err);
document.getElementById('load-image').disabled = true;
}
}
// Initialize editor when library is loaded
if (document.readyState === 'complete') {
initEditor();
} else {
window.addEventListener('load', initEditor);
}
} catch (err) {
document.getElementById('status').textContent = `Failed to initialize editor: ${err.message}`;
document.getElementById('status').className = 'error';
console.error('Editor initialization error:', err);
}
document.getElementById('load-image').addEventListener('change', function(event) {
const statusEl = document.getElementById('status');
const file = event.target.files[0];
if (!file) {
statusEl.textContent = 'No file selected';
statusEl.className = 'error';
return;
}
// More robust file type checking
if (!file.type.startsWith('image/')) {
statusEl.textContent = 'Please select an image file (JPEG, PNG, etc.)';
statusEl.className = 'error';
return;
}
if (!editorReady) {
statusEl.textContent = 'Editor is not ready yet. Please try again.';
statusEl.className = 'error';
return;
}
statusEl.textContent = 'Loading image...';
statusEl.className = '';
event.target.disabled = true;
try {
imageEditor.loadImageFromFile(file)
.then(() => {
statusEl.textContent = 'Image loaded successfully!';
statusEl.className = 'success';
})
.catch(err => {
statusEl.textContent = `Error: ${err.message || 'Failed to load image'}`;
statusEl.className = 'error';
console.error('Image loading error:', err);
})
.finally(() => {
event.target.disabled = false;
event.target.value = ''; // Reset input to allow selecting same file again
});
} catch (err) {
statusEl.textContent = `Error: ${err.message || 'Unexpected error occurred'}`;
statusEl.className = 'error';
console.error('Unexpected error:', err);
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jasvir-singh1021/Image_Editor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
|