Question

我正致力于创建三星tizen tv的应用程序。在我的应用程序中，我显示来自实时URL的图像。在一个屏幕中有许多图像（aprrox.150），每个图像尺寸更大（约1 MB），分辨率更高（1920×1080）。由于图像大小和分辨率，项目之间的导航变得缓慢。所以我想使用jquery减少图像大小。是否可以从url下载图像并使用jquery物理调整图像大小而不使用任何服务器端脚本？

Answer 1

不确定是否可以在三星电视的应用中使用，但在浏览器中你可以使用画布来实现（在下面的示例中，原始图像的大小（baseImg）会减少两次）

$(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

还有一个示例不使用jQuery并仅显示已调整大小的图像，并且不显示原始图像

<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

使用jquery调整图像大小而不使用任何服务器端脚本

1 个答案: