サーバーサイドスクリプトを使用せずにjqueryを使用して画像サイズを変更

Question

私はsamsung tizen tvのアプリケーションを作成するために取り組んでいます。 私のアプリケーションでは、ライブURLから画像を表示します。 1つの画面には、多くの画像（aprrox。150）と各画像のサイズ（約1 MB）が高く、解像度（1920 x 1080）が高くなります。 画像のサイズと解像度のため、アイテム間のナビゲーションが遅くなります。 jqueryを使用してイメージのサイズを縮小したいと考えています。 URLから画像をダウンロードし、サーバーサイドスクリプトを使用せずにjqueryを使用して物理的にサイズを変更することはできますか？それはサムスンのテレビ用のアプリケーションで可能ですが、ブラウザでは、あなたがこのキャンバス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

そしてもう一つの例

あなたのサイズを言うとき0

<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