템플릿 : 배경 이미지로 미리보기

Question

파인 업 로더가 배경 이미지로 drawThumbnail을 만들거나 크기가 조정되고 잘린 사각형을 만들 수있게해야합니다.

기본적으로, 나는이었다 내가 AngularJS와/flowjs에 사용되는 동작, (다소) 재현하기 위해 노력하고 있어요 : 이것은 축소판을 그리는 방법에 대한 API가

을

// I modified flowjs to set the background-image here instead of src with the base64 image. 
<div ng-repeat="file in $flow.files" flow-img background-size: 'cover'"> 

하지만 구체적으로 명시 img 또는 캔버스를 반환합니다. 대신 CSS 속성 배경 이미지로 설정하고 싶습니다.

http://docs.fineuploader.com/branch/master/api/methods.html#drawThumbnail

이 솔루션은 가까이 가져하지만 배경 크기와 동일한 효과를 달성하지 않습니다 커버를.

#image { 
    width: 33%; 
    padding-top: 33%; 
    position: relative; 
} 

#image canvas { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

... 
callbacks: { 
    onSubmit: function(id, fileName) { 
    var canvas = document.createElement('canvas'); 
    canvas.width = 500; 
    canvas.height = 500; 
    $('#image').html(canvas); 
    this.drawThumbnail(id, canvas, 500, false); 
} 

는 UI 모드를 사용하여 나에게 정확히 같은 문제를주고, 나는 단지 그렇게 같은 SRC로 사용할 수 있습니다

<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale> 

를이 내 선호하는 솔루션입니다 ...

#image { 
    width: 33%; 
    padding-top: 33%; 
    position: relative; 
    background-size: cover; 
} 

... 
callbacks: { 
    onSubmit: function(id, fileName) { 
    this.drawThumbnail(); // somehow onto the background property of #image 
} 

또 다른 해결책은 널리 적용되면 배경으로 요소를 사용하는 것입니다. (왜냐하면 #image 배경으로 캔버스를 사용할 수 있기 때문입니다.) 그러나 현재로서는 실용적인 해결책이 아닙니다 :

01 23,516,

https://developer.mozilla.org/en-US/docs/Web/CSS/element

또 다른 해결책은 $ ('# 이미지 IMG'). ATTR ('SRC')의 변경을 감시하는 것입니다. img 요소를 숨기고 변경시 #image의 배경 이미지를 설정하십시오. 그러나 인코딩 된 이미지가 바로 거기에있을 때 그것은 또 다른 어리석은 해결책입니다.

벌금 업 로더로 이것을 수행하는 방법이 아직 없다면 img 유형의 요소를 제한하는 이유는 무엇입니까? 요소와 속성을 가져 가지 않을까요? 왜 그냥 base64 이미지를 반환하고 우리가 어떤 속성을 설정하자?

미리 감사드립니다.

Answer 1

그것은, 썸네일을 생성하는 미세 업 로더를 물어 API 방법 임시 <img> 전달의 <img>에서 src 속성을 잡고 배경 이미지를 구성하는 것을 사용하는 것이 가장 쉬운 해결책처럼 들린다. 예를 들어

:

callbacks: { 
    onSubmit: function(id) { 
     var tempImg = document.createElement('img'), 
      self = this; 

     this.drawThumbnail(id, tempImg, 500).then(function() { 
      var fileContainerEl = self.getItemByFileId(id); 
       previewImg = fileContainerEl.getElementsByClassName('previewImg')[0];    

      previewImg.style['background-image'] = 'url("' + tempImg.src + '")'; 
     }); 
}