JavaScript-Load-Image

https://github.com/blueimp/JavaScript-Load-Image

blueimp/JavaScript-Load-Image

이미지 썸네일 및 리사이징 관련해서 처리중 기본적인건 그냥 FileApi 를 이용해서 작성이 가능했는데 사진이 돌아가는 부분을 처리하기 위해서 좀 귀찮은 부분이 많았다.

그러던중 발견한 JavaScript-Load-Image를 이용해서 작업했다.

파일을 이미지로 받아서 결과값을 canvas로 돌려주는데 그 canvas값을 base64이미지로 변형하여 활용했다.

 

<script src="/js/load-image.all.min.js"></script>

<input type="file" name="test_image" id="test_image" accept=".gif, .jpg, .png">

<img src="" id="resizeImage">

$("#test_image").change(function(event){

    loadImage(
        this.files[0],
        function(img, data) {
            $("#resizeImage").attr("src",img.toDataURL("image/jpeg"));
        },
        {
            maxWidth:1280,
            meta: true,
            canvas:true,
            orientation:true
        }
    );

})

기본적으로는 해당 샘플형태로 이용하였다.