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

Question

我有一个图像列表，这些图像具有相当大的分辨率，超过 2000x1000 像素。我想将它们作为缩略图显示在页面上，但我不想实际/物理地创建缩略图并将它们存储在服务器上。是否有任何廉价的方法可以即时生成此类图像缩略图？也许使用html5。

Answer 1

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

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

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

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

如果您没有很多图片，只需发送完整尺寸并在浏览器中获取性能。

Answer 2

用 HTML5（应该是画布）创建缩略图意味着您必须先在客户端下载图像，调整其大小，然后再显示图像。如果您仍然下载原始大图像，那么这样做没有任何目的。

所以，我看到的唯一方法是创建一个 PHP 文件（或您使用的任何服务器端语言），它会即时生成缩略图。我给你一个 PHP 例子。

（缩略图.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 3

• 我不清楚图像在哪里。

是不是像：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 4

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

Cloudinary 提供了一个将图片上传到云端的 API。这些图像使用 Amazon 的 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;
});