큰 이미지에서 즉석에서 미리보기 이미지 미리보기 만들기

Question

2000x1000 픽셀 이상의 상당히 큰 해상도의 이미지 목록이 있습니다. 페이지에 미리보기 이미지로 표시하고 싶지만 실제/실제로 미리보기 이미지를 만들어 서버에 저장하고 싶지는 않습니다. 그러한 이미지를 생성하는 비범 한 방법 - 즉석에서 축소판 이미지가 있습니까? 어쩌면 html5 사용.

Answer 1

서버에 따라 이미지를 브라우저로 보내기 전에 크기를 조정하는 방법에는 여러 가지가 있습니다. PHP의 경우 대답은 resize image in PHP입니다.

브라우저에서 HTML5로 처리하려면 전체 크기 이미지를 전송해야하므로 대역폭 및 다운로드 시간에 이점이 없습니다. 이미지 태그 속성 width 및 height 또는 스타일 폭 및 높이에 지정하여 문서의 이미지 크기를 변경할 수 있습니다. 이렇게하면 이미지의 크기가 조정되지만 전체 크기 이미지는 브라우저에 메모리에 저장되므로 충분한 이미지가 표시되면 많은 메모리를 소비합니다.

메모리를 절약하기 위해 HTML5에 이미지 크기를 조정할 수있는 방법이 없다고 생각합니다. 자바 스크립트 이미지 편집기 라이브러리를 사용하여 다운로드 한 다음 이미지의 크기를 조정 한 다음 메모리에서 절약 할 원본을 문서에서 제거 할 수는 있습니다. 그러나 이것은 가장 효과적인 방법이 아닌 것처럼 보입니다.

제 생각에는 많은 이미지가있는 경우 가장 좋은 방법은 미리보기 이미지를 변환하여 저장하는 것입니다 (미안)하지만 서버가 자동으로 모든 것을 처리하도록하는 것이 가장 좋습니다.

이미지가 많지 않은 경우 전체 크기로 보내고 브라우저에서 성능을 확인하십시오.

Answer 2

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 3

• 그것은 이미지 어디 나에게 분명하지 않다.

는 같다 : 파일 : /// 집/팝콘 또는 에 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/> 

자바 스크립트

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

한 가지 가능한 솔루션은 Cloudinary로 업로드하는 이미지에 대한 API를 사용하고 있습니다.

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; 
});