TIP게시판

제목 자바스크립트 이미지 에디터
글쓴이 한대승(불의회상) 작성시각 2022/08/26 12:04:38
댓글 : 0 추천 : 0 스크랩 : 0 조회수 : 18569   RSS
한대승(불의회상)

Toast UI image editor 라는 물건인데 웹브라우져에서 간단히 이미지 편집이 가능하네요.

샘플 코드 공유합니다.

* github : https://github.com/nhn/tui.image-editor

* CDN을 이용한 샘플코드

<html>
<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 rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
    <style>
        @import url(http://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/3.6.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 src="https://uicdn.toast.com/tui-image-editor/latest/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>
</body>
</html>

 

 다음글 모바일 환경에서의 이미지 업로드 (2)
 이전글 메뉴를 sql 한 문장으로 한 번에 depth, ord... (3)

댓글

없음