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

问题描述：

我有一个相当大的分辨率，超过2000x1000像素的图像列表。我想以缩略图的形式在页面上显示它们，但我不想实际/物理地创建缩略图并将它们存储在服务器上。有没有什么廉价的方式来生成这样的图像 - 即时缩略图？也许使用html5。从大图像动态创建缩略图预览图像

答

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

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

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

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

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

答

使用HTML5创建缩略图（应该是canvas）意味着您必须先在客户端上下载图像，调整其大小，然后显示图像。无论如何，如果你下载了原始的大图，没有任何目的。

所以，我看到它的唯一方法是创建一个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" />

答

这不是很清楚，我在哪里图像。

是什么样子：文件：///家/爆米花或的http：//本地主机：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 = oc.toDataURL(); 
     } 
     cb(data); 
     }; 
     img.src = event.target.result; 
    }; 
    reader.readAsDataURL(input.files[0]); 
    } 
}

答

一个用于你的情况可能的解决方案使用API上传图像，如Cloudinary。

Cloudinary提供了用于上传图片到云的API。使用亚马逊的S3服务，图像以安全备份和修订历史存储在云中。

Cloudinary的Javascript库包装Cloudinary的上传API，并简化了integration.They也提供了直接从浏览器到云上载的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; 
});

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

相关推荐