image-editor 관련 버그 및 개선 사항 모음입니다.

kim-jeongki commented 8 years ago

의존성있는 모듈의 버전 정보입니다.

jquery 2.1.4
fabric 1.6.6
fe-code-snippet 1.2.1
tui-image-editor 1.2.0
1. 이미지를 처음 로딩하거나 로테이션 이후 imageEditor.toDataURL() 을 명시적으로 호출하지 않으면 하면에 표시되지 않습니다.

imageObjectURL = window.URL.createObjectURL(fileOrBlob);
            imageEditor = new tuiImageEditor('.image-editor canvas', {
                cssMaxWidth: 720, // Component default value: 1000
                cssMaxHeight: 600  // Component default value: 800
            });

            imageEditor.loadImageFromURL(imageObjectURL, fileOrBlob.name);
            imageEditor.on({
                loadImage: function (dimension) {
                    window.URL.revokeObjectURL(imageObjectURL);
                    imageEditor.toDataURL();    //to trick for display image rendering
                },
                emptyUndoStack: function () {
                    $scope.vm.emptyUndo = true;
                },
                emptyRedoStack: function () {
                    $scope.vm.emptyRedo = true;
                },
                pushUndoStack: function () {
                    $scope.vm.emptyUndo = false;
                },
                pushRedoStack: function () {
                    $scope.vm.emptyRedo = false;
                }
            });

function applyRotate(rotate) {
            imageEditor && imageEditor.rotate(rotate);
            imageEditor.toDataURL();    //to trick for display image rendering
        }

        function applyAngle(angle) {
            imageEditor && imageEditor.setAngle(angle);
            imageEditor.toDataURL();    //to trick for display image rendering
        }

이미지 로딩 후 pushUndoStack callback이 무조건 1번 호출됩니다.
Undo / Redo 기능을 활성화/비활성화 하기 위해서 사용하는 콜백인데 무조건 Undo 기능이 활성화되며 Undo 를 호출 시 기존에 로드된 이미지가 제거됩니다. 다시 Redo 호출 시 스크립트 에러가 발생합니다. image-editor.js:840 Uncaught TypeError: Cannot read property 'getElement' of null(anonymous function) @ image-editor.js:840(anonymous function) @ fabric.min.js:2n.onerror @ fabric.min.js:1
emptyUndoStack, emptyRedoStack, pushUndoStack, pushRedoStack callback의 arguments 는 모두 [] 값으로 설정됩니다.
imageEditor.clearObjects() 호출 시 로드된 이미지 정보까지 초기화 됩니다.
imageEditor.loadImageFromFile() 을 사용할 경우 내부적으로 URL.createObjectURL()을 사용하는데 이후 URL.revokeImageObjectURL() 호출이 되지 않으면 메모리 릭이 날 가능성이 있습니다. 관련 예외처리가 필요합니다.

\ 아래 URL에서 확인가능합니다.** https://nhnent.dev.dooray.com/messenger?_digest=true 클립보드에 이미지를 하나 복사해서 메신저 본문에 붙이거나, 이미지 파일을 메신저 본문에 드래그 할 경우 해당 기능 확인이 가능합니다.

kim-jeongki commented 8 years ago

아래는 개선 및 추가 되었으면 하는 기능입니다.

drawLine 뿐만 아니라 Rectangle, Circle, Star와 같은 도형이 추가 지원되었으면 합니다.
Icon으로 사용하는 Unicode Charset 이 추가되었으면 합니다. (이모티콘 처럼 카테고리 별로 각 상세 텍스트가 레이어로 지정되었으면 좋을 것 같습니다. http://unicode-table.com/en/sets/special-symbols/
텍스트 추가/ 편집 시 이미지에 클릭한 위치에 바로 편집이 가능하고 서브 툴바에서 스타일을 바로 지정했으면 합니다.
선택된 Object에 delete key가 입력될 경우 삭제가 바로 되었으면 합니다.

kim-jeongki commented 8 years ago

구두로 말씀드린 callback 디자인 개선 사항인데요. emptyUndoStack, emptyRedoStack, pushUndoStack, pushRedoStack callback 을 changeUndoStack, changeRedoStack 으로 2개로 줄이고 arguments로 현재 stack의 개수를 넘겨주는 방식이 더 유용하지 않을까 합니다.

nhn / tui.image-editor

image-editor 관련 버그 및 개선 사항 모음입니다. #3