mirror of
https://github.com/ducbao414/win32.run.git
synced 2025-12-17 01:32:50 +09:00
145 lines
4.5 KiB
HTML
145 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>0. Design</title>
|
|
<link
|
|
type="text/css"
|
|
href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link type="text/css" href="../dist/tui-image-editor.css" rel="stylesheet" />
|
|
<style>
|
|
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="tui-image-editor-container"></div>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.js"
|
|
></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
|
|
></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
|
|
></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
|
|
></script>
|
|
<script type="text/javascript" src="../dist/tui-image-editor.js"></script>
|
|
<script type="text/javascript" src="js/theme/white-theme.js"></script>
|
|
<script type="text/javascript" src="js/theme/black-theme.js"></script>
|
|
<script>
|
|
// Image editor
|
|
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
|
|
includeUI: {
|
|
loadImage: {
|
|
path: 'img/sampleImage2.png',
|
|
name: 'SampleImage',
|
|
},
|
|
theme: blackTheme, // or whiteTheme,
|
|
initMenu: 'filter',
|
|
menuBarPosition: 'bottom',
|
|
},
|
|
cssMaxWidth: 700,
|
|
cssMaxHeight: 500,
|
|
usageStatistics: false,
|
|
});
|
|
window.onresize = function () {
|
|
imageEditor.ui.resizeEditor();
|
|
};
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var load_file_func = () => {
|
|
console.log('load_file_func');
|
|
}
|
|
|
|
var save_file_func = () => {
|
|
console.log('save_file_func');
|
|
}
|
|
|
|
var save_file_as_func = () => {
|
|
console.log('save_file_as_func');
|
|
}
|
|
|
|
var about_func = () => {
|
|
console.log('about_func')
|
|
}
|
|
|
|
function setup_ui(){
|
|
document.querySelector('.tui-image-editor-header-buttons').remove();
|
|
document.querySelector('.tui-image-editor-header-logo').remove();
|
|
|
|
let open_btn = document.createElement('div');
|
|
open_btn.style.position = 'absolute';
|
|
open_btn.style.top = '13px';
|
|
open_btn.style.left = '10px';
|
|
open_btn.style.width = '70px';
|
|
open_btn.style.height = '30px';
|
|
open_btn.style.zIndex = 99999;
|
|
open_btn.innerHTML = `
|
|
<button
|
|
onclick="load_file_func()"
|
|
style="width:70px;height:30px;border-radius:5px;background-color: #3b82f6;outline: none;color:#f1f5f9;border:none;">
|
|
Open
|
|
</button>
|
|
`;
|
|
document.body.append(open_btn);
|
|
|
|
let right_btns = document.createElement('div');
|
|
right_btns.style.position = 'absolute';
|
|
right_btns.style.top = '13px';
|
|
right_btns.style.right = '10px';
|
|
right_btns.style.width = '150px';
|
|
right_btns.style.height = '30px';
|
|
right_btns.style.display = 'flex';
|
|
right_btns.style.justifyContent = 'space-between';
|
|
right_btns.style.zIndex = 99999;
|
|
right_btns.innerHTML = `
|
|
<button
|
|
onclick="save_file_func()"
|
|
style="width:70px;height:30px;border-radius:5px;background-color: #3b82f6;outline: none;color:#f1f5f9;border:none;">
|
|
Save
|
|
</button>
|
|
<button
|
|
onclick="save_file_as_func()"
|
|
style="width:70px;height:30px;border-radius:5px;background-color: #3b82f6;outline: none;color:#f1f5f9;border:none;">
|
|
Save As
|
|
</button>
|
|
`;
|
|
document.body.append(right_btns);
|
|
|
|
let about_btn = document.createElement('div');
|
|
about_btn.style.position = 'absolute';
|
|
about_btn.style.bottom = '15px';
|
|
about_btn.style.right = '10px';
|
|
about_btn.style.width = '70px';
|
|
about_btn.style.height = '30px';
|
|
about_btn.style.zIndex = 99999;
|
|
about_btn.innerHTML = `
|
|
<button
|
|
onclick="about_func()"
|
|
style="width:70px;height:30px;border-radius:5px;background-color:transparent;outline: none;color:#e2e8f0;border:solid 1px #f1f5f9;">
|
|
About
|
|
</button>
|
|
`;
|
|
document.body.append(about_btn);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|