웹에서 이미지 편집 가능한 사이트

*** 웹 상에서  이미지 편집 기능 제공하는 사이트 ***

Pixlr Editor - Online Photo Editor
https://pixlr.com/editor/

Java - 이미지 크기 변경

String imgSourcePath= "test_image.jpg";       // 원본 이미지 파일명 (경로 포함)
String imgTargetPath= "test_imageNew.jpg";    // 새 이미지 파일명(경로 포함)
String imgFormat = "jpg";                     // 새 이미지 포맷. jpg, gif 등
int newWidth = 640;              // 새 이미지 넓이
int newHeight = 360;             // 새 이미지 높이



imgResize(imgSourcePath, newImgFilePath, imgFormat, newWidth, newHeight);


/**
 * Image Resize
 */
public void imgResize(String imgSourcePath, String imgTargetPath, String imgFormat, int newWidth, int newHeight)
{
    try
    {
        // 원본 이미지 가져오기
        Image imgSrc = ImageIO.read(new File(imgSourcePath));

        // 이미지 리사이즈
        // Image.SCALE_DEFAULT : 기본 이미지 스케일링 알고리즘 사용
        // Image.SCALE_FAST    : 이미지 부드러움보다 속도 우선
        // Image.SCALE_SMOOTH  : 속도보다 이미지 부드러움을 우선
        // Image.SCALE_AREA_AVERAGING  : 평균 알고리즘 사용
        Image resizeImage = imgSrc.getScaledInstance(newWidth, newHeight, Image.SCALE_SMOOTH);

        // 새 이미지  저장하기
        BufferedImage newImage = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);
        Graphics g = newImage.getGraphics();
        g.drawImage(resizeImage, 0, 0, null);
        g.dispose();
        ImageIO.write(newImage, imgFormat, new File(imgTargetPath));
    }
    catch (Exception e)
    {
    }
}

Java - URL 이미지 파일로 저장하기

String imgUrl = "http://www.a.com/test_image.jpg";  // 이미지 URL
String imgFilePath = "test_image.jpg";              // 저장할 파일명 (경로 포함)
String imgFormat = "jpg";                         // 저장할 이미지 포맷. jpg, gif 등

getImageFromUrl(imgUrl, imgFilePath, imgFormat);






/**
 * Image URL to File
 */
public void getImageFromUrl(String imgUrl, String imgFilePath, String imgFormat)
{
        try
        {
            // Image 가져오기
            BufferedImage image = ImageIO.read(new URL(imgUrl));
                       
            // Image 저장할 파일
            File imgFile = new File(imgFilePath);
           
            // Image 저장
            ImageIO.write(image, imgFormat, imgFile);
        }
        catch (Exception e)
        {
        }
}

JqGrid 컬럼에 이미지 표시

*** 설명 ***
컬럼에 이미지를 표시하려면 formatter를 사용.

*** JqGrid 설정 ***
jQuery("#registerUsers").jqGrid({
        url: '/test/user',
        datatype: "json",
        colNames: ['Name', 'images'],
        colModel: [
          { name: 'Name', index: 'Name', width: 150, align: 'left' },
          { name: 'Img', index: 'Img', width: 100, align: 'center', formatter: imageFormatter },
          { name: 'imgUrl', index: 'imgUrl', width: 100, align: 'center', hidden : true}
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true,
        caption: "Users"
    });
});

*** Formatter 스크립트 함수 ***
function imageFormatter(cellvalue, options, rowObject)
{
    // rowObject  : JqGrid의 행 정보를 담고 있다.
    console.log(rowObject);

    return '<img src="' + rowObject.imgUrl + '" />';
}

Html src 태그 이미지 사이즈 자동 조절

*** 가로 세로 자동 ***
<img src="" style="width: 100%; height: auto;"/>

*** 가로 고정 세로 자동 ***
<img src="" style="width: 100px; height: auto;"/>

JQuery 이미지 선택시 미리보기

*** HTML Code ***
<html>
  <body>
    <img id="imgPreview src="">
    <input id="inputFile" type="file"></input>
 </body>
</html>

*** Script Code ***
jQuery(function($) {
  // File 선택(값 변경) Event 함수
  $('#inputFile').change(function() {
    preview(this);
  });

  // 미리보기 함수
  function preview(input)
  {
    if (input.files && input.files[0])
    {
       var reader = new FileReader();

       //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
       reader.onload = function (e) {
          $('#imgPreview').attr('src', e.target.result);
       };

       reader.readAsDataURL(input.files[0]);
    }
  }
}