서버 측 스크립트를 사용하지 않고 jquery를 사용하여 이미지 크기 조정

Question

나는 삼성 tizen tv의 응용 프로그램을 만들기 위해 노력하고 있습니다. 내 응용 프로그램에서 라이브 URL의 이미지를 표시합니다. 한 화면에는 많은 이미지 (aprrox. 150)와 각 이미지의 크기가 더 높고 (약 1MB) 해상도가 더 높습니다 (1920 x 1080). 이미지 크기 및 해상도로 인해 항목 간 탐색이 느려집니다. 그래서 jquery를 사용하여 이미지 크기를 줄이려고합니다. URL에서 이미지를 다운로드하고 서버 사이드 스크립트를 사용하지 않고 jquery를 사용하여 물리적으로 크기를 조정할 수 있습니까? 이 삼성 TV의 애플리케이션에서 가능하지만 브라우저에서이 사용 캔버스 achive 수있는 경우

Answer 1

확실하지

(아래의 예를, 원본 이미지의 크기 (baseImg)의 두 배 감소됩니다) 단지 크기를 조정할 이미지 jQuery를하고 디스플레이를 사용하지 않고 원본 이미지를 표시하지 않습니다

$(document).ready(function() { 
    var baseImg = $('#base')[0], 
     outImg = $('#result-image'), 
     canvas, context; 

    canvas = document.createElement('canvas'); 
    // set canvas size to the size of original image 
    canvas.width = baseImg.width; 
    canvas.height = baseImg.height; 
    context = canvas.getContext('2d'); 
    context.drawImage(baseImg, 0, 0, baseImg.width/2, baseImg.height/2); 

    outImg.attr('src', canvas.toDataURL()); 
}); 

jsfiddle

그리고 하나 더 예를

<img id="result-image" /> 

var baseImg = new Image(), 
     outImg = document.getElementById('result-image'), 
     canvas, context; 

    baseImg.onload = function() { 
     canvas = document.createElement('canvas'); 
     // set canvas size to the size of original image 
     canvas.width = baseImg.width; 
     canvas.height = baseImg.height; 
     context = canvas.getContext('2d'); 
     context.drawImage(baseImg, 0, 0, baseImg.width/2, baseImg.height/2); 

     outImg.src = canvas.toDataURL(); 
    }; 

    // not requires in your case,it just allows to use toDataURL() for image loaded from another domain 
    baseImg.crossOrigin = "Anonymous"; 

    baseImg.src = "https://pp.vk.me/c626925/v626925429/26d09/KaotJEBjASw.jpg"; 

check on jsfiddle