Spaces:
Running
Running
File size: 1,425 Bytes
b456468 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Toast Image Editor</title>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
<style>
html, body {
margin: 0;
height: 100%;
background-color: #2e2e2e;
}
#tui-image-editor {
height: 100%;
}
</style>
</head>
<body>
<div id="tui-image-editor"></div>
<script src="https://uicdn.toast.com/tui-code-snippet/latest/tui-code-snippet.js"></script>
<script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.js"></script>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
<script>
const imageEditor = new tui.ImageEditor('#tui-image-editor', {
includeUI: {
loadImage: {
path: 'https://via.placeholder.com/800x600.png',
name: 'SampleImage'
},
theme: {},
menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
initMenu: '',
uiSize: {
width: '100%',
height: '100%'
},
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
</script>
</body>
</html>
|