從大圖像動態創建縮略圖預覽圖像

Question

我有一個相當大的分辨率，超過2000x1000像素的圖像列表。我想以縮略圖的形式在頁面上顯示它們，但我不想實際/物理地創建縮略圖並將它們存儲在服務器上。有沒有什麼廉價的方式來生成這樣的圖像 - 即時縮略圖？也許使用html5。

Answer 1

根據服務器的不同，可以在將圖像發送到瀏覽器之前調整圖像大小。對於PHP的答案是resize image in PHP。

如果你想在HTML5中完成（在瀏覽器上），你仍然會發送全尺寸的圖像，所以你不會得到任何帶寬和下載時間的好處。您可以通過在圖像標籤屬性寬度和高度或樣式寬度和高度中指定它來更改文檔中的圖像大小。這將調整圖像的大小，但是如果顯示足夠的圖像，全尺寸的圖像將存儲在瀏覽器的內存中，這將消耗大量內存。

我不認爲HTML5有任何調整圖像大小以節省內存的方式，儘管您可以使用JavaScript圖像編輯器庫在下載後調整圖像大小，然後從文檔中刪除原來的內容以節省內存。但是，這似乎是最不有效的方法。

在我看來，如果你有很多圖片，最好的方法是轉換縮略圖並存儲它們（對不起），但讓你的服務器自動處理所有這些。

如果您沒有很多圖片，只需發送完整尺寸並在瀏覽器中打開性能即可。

Answer 2

使用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" /> 

Answer 3

• 這不是很清楚，我在哪裏圖像。

是什麼樣子：文件：///家/爆米花 或 的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]); 
    } 
} 

Answer 4

一個用於你的情況可能的解決方案使用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; 
});