Question

我有一个分辨率非常高的图像列表，超过2000x1000像素。我想以缩略图的形式在页面上显示它们，但我不想实际/物理地创建缩略图并将它们存储在服务器上。是否有任何廉价的方式来生成这样的图像 - 动态缩略图？也许使用html5。

Answer 1

我不清楚图像在哪里。

就像：file：/// home / popcorn 要么 http：// localhost：8080例如

在发布问题之前，请确定您想要的内容，您做了什么？你的研究在哪里......

在Codepen中，我使用画布将大图从用户上传到服务器。并在上传前调整大小..所以调整大小是用户端。

http://codepen.io/zoutepopcorn/pen/QvLxMp?editors=1010

<强> HTML

<input type="file" value=""><br/>
<label>Original Image</label><br/>
<img id="original-image" width="20px"><br/>
<br>
<img id="great-image"><br/>

<强>的Javascript

var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
    this.value = null;
};

input.onchange = function(){
    resizeImageToSpecificWidth(200, function(dat) {
        console.log(dat);
        document.getElementById("great-image").src = dat;
  });
};

function resizeImageToSpecificWidth(max, cb) {
  var data;
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(event) {
      var img = new Image();
      img.onload = function() {
        if (img.width > max) {
          var oc = document.createElement('canvas'), octx = oc.getContext('2d');
          oc.width = img.width;
          oc.height = img.height;
          octx.drawImage(img, 0, 0);
          if( img.width > img.height) {
            oc.height = (img.height / img.width) * max;
            oc.width = max;
          } else {
            oc.width = (img.width / img.height) * max;
            oc.height = max;
          }
          octx.drawImage(oc, 0, 0, oc.width, oc.height);          
          octx.drawImage(img, 0, 0, oc.width, oc.height);
          data = oc.toDataURL();
        } else {
          data = img.src;
        }
        cb(data);
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  }
}

Answer 2

根据服务器的不同，有多种方法可以在将图像发送到浏览器之前调整图像大小。对于PHP，答案是resize image in PHP。

如果你想在HTML5中（在浏览器上）这样做，你仍然会发送全尺寸图像，这样你就不会在带宽和下载时间方面获得任何好处。您可以通过在图像标签属性宽度和高度或样式宽度和高度中指定图像大小来更改文档中的图像大小。这将调整图像的大小，但是如果你有足够的图像显示，浏览器内存中的全尺寸图像将会消耗大量内存。

我不相信HTML5有任何调整图像大小以节省内存的方法，尽管您可以使用javascript图像编辑器库在下载后重新调整图像大小，然后从文档中删除原件以节省内存。然而，这似乎是效率最低的方法。

在我看来，如果你有很多图像，最好的方法是转换缩略图并存储它们（对不起），但让你的服务器自动处理所有这些。

如果您没有大量图片，只需发送完整尺寸并在浏览器中点击效果。

Answer 3

使用HTML5（假设是画布）创建缩略图意味着您必须首先在客户端上下载图像，调整其大小，然后显示图像。如果您下载原始大图像，则没有任何目的。

因此，我看到的唯一方法是创建一个PHP文件（或您使用的任何服务器端语言），它将动态生成缩略图。我会给你一个PHP示例。

（thumbnail.php）

<?php

// generates a thumbnail, if you only provide a width or a height value,
// it will keep the original image ratio
function output_thumbnail($source, $newWidth, $newHeight) {

    $type = pathinfo($source, PATHINFO_EXTENSION);
    if ($type == "png") {
        $image = imagecreatefrompng($source);
    } else {
        $image = imagecreatefromjpeg($source);
    }
    // get image dimensions
    $dimensions = getimagesize($source);

    $width = $dimensions[0];
    $height = $dimensions[1];

    if (!$newWidth && !$newHeight) return false;
    // if width or height is not set (but at least one is) calculate the other using ratio
    if (!$newWidth || !$newHeight) {
        $ratio = $width / $height;

        if ($newHeight) {
            $newWidth = $newHeight * $ratio;
        } else {
            $newHeight = $newWidth / $ratio;
        }
    }

    // create an empty image
    $resizedImage = imagecreatetruecolor($newWidth, $newHeight);
    // fill it with resized version of original image
    imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);

    // notify the browser that incoming response is an image
    header("Content-Type: image/jpeg");
    echo imagejpeg($resizedImage);

    // free the memory
    imagedestroy($image);
    imagedestroy($resizedImage);
}

output_thumbnail($_GET["image"], 500); // resize to 500 pixels in width

现在您可以在网页中使用它：

<img src="/thumbnail.php?image=images/large.jpg" />

Answer 4

您的案例的一种可能解决方案是使用API上传图片，例如Cloudinary。

Cloudinary提供了一个用于将图像上传到云端的API。利用亚马逊的S3服务，图像存储在云中，具有安全备份和修订历史记录。

Cloudinary的Javascript库包含Cloudinary的上传API并简化了集成。他们还提供了jQuery视图助手方法，可以直接从浏览器上传到云端。

jQuery image upload库可以即时显示上传图像的缩略图。

下面是一个示例代码，用于创建上传图像的150x100缩略图，并使用此图像的公共ID更新输入字段。

$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {  
$('.preview').html(
$.cloudinary.image(data.result.public_id, 
  { format: data.result.format, version: data.result.version, 
    crop: 'fill', width: 150, height: 100 })
 );    
$('.image_public_id').val(data.result.public_id);    
 return true;
});

从大图像中动态创建缩略图预览图像

4 个答案: