[2015.12.10] Javascript 로 구현한 HTML5 Web Drawing Studio

워허허허허허.... 꽤나 퀄리티 높은 상태로 codepen 에 올라왔네요.

정말 깔끔하고 가독성 좋게 개발해놓은거라 보고 공부하기 좋겠습니다.

분량이 좀 되는편이니 전체를 다 리뷰하지는 못하겠고 저는 파일 불러오는 부분부터 우선 보겠습니다.ㅎ

파일 불러오기는 input(file) 의 onchange 를 이용하여 스크립트를 실행하구요

<input type="file" onchange="Artboard.Import(this)" title="Import Image File" />

그림 파일 불러오는 메인 로직은 다음과 같습니다.

    $this.Import = function(file)
    {
        if(typeof file == 'object' && file.tagName && file.tagName.toLowerCase() == 'input')
        {
            var input = file;

            for(var i in input.files)
            {
                $this.Import(input.files[i]);
            }

            input.value = '';

            return;
        }

        if(file && file instanceof File)
        {
            var filetype = file.name.replace(/^(.*)\.(.*?)$/, '$2').toLowerCase();

            switch(filetype)
            {
                case 'png': case 'jpg': case 'jpeg': case 'gif': case 'bmp':
                    $this.Layers.Add(function(layer)
                    {
                        layer.Name = file.name.replace(/^(.*)\.(.*?)$/, '$1');

                        var reader = new FileReader();
                            reader.onload = function(r)
                            {
                                var img = new Image();
                                    img.onload = function()
                                    {
                                        layer.Context.drawImage(this, 0, 0);
                                    };
                                    img.src = r.target.result;
                            };

                        reader.readAsDataURL(file);
                    });
                    break;

                case 'psd':
                    $this.Layers.Add(function(layer)
                    {
                        layer.Name = file.name.replace(/^(.*)\.(.*?)$/, '$1');

                        var PSD = require('psd');
                            PSD.fromDroppedFile(file).then(function(psd)
                            {
                                var img = new Image();
                                    img.onload = function()
                                    {
                                        layer.Context.drawImage(this, 0, 0);
                                    };
                                    img.src = psd.image.toBase64();
                            });
                    });
                    break;

                case 'h5i':
                    var reader = new FileReader();
                        reader.onload = function(r)
                        {
                            try
                            {
                                var data = $.parseJSON(r.target.result);

                                for(var i in data.layers)
                                {
                                    var layerdata = data.layers[i],
                                        newlayer = $this.Layers.Add(),
                                        img = new Image();

                                    newlayer.Name = layerdata.name;

                                    img.onload = function()
                                    {
                                        newlayer.Context.drawImage(this, 0, 0);
                                    };
                                    img.src = layerdata.image;
                                }
                            }
                            catch(e){}
                        };
                    reader.readAsText(file);
                    break;
            }
        }
        return $this;
    };

​

Artboard 객체에 담겨져 있는 멤버들의 구성도를 간략하게 정리해봤습니다.

멤버변수 각자의 역할과 기능은 다시 또 시간날때 찬찬히....ㅎ

아 참고로 웹용 포토샵 사이트 링크 올려드립니다.

https://pixlr.com/editor/

간단한 사용 예제 및 Demo

See the Pen HTML5 Drawing Studio by Boylett (@boylett) on CodePen.