투명한 이미지를 생성하는 html2canvas 플러그인.

Question

나는 div 안에있는 일부 요소의 CSS 속성을 변경할 수있는 프로젝트 작업을하고있다. 그리고 제출할 때, 이미지를 저장하기 위해 그 div에 대해 html2canvas save를하고있다. 이미지는 저장 중이지만 투명합니다. 변경 사항은 반영되지 않습니다.

HTML 마크 업 :

<div id="mainCanvas"> 
    <div id="imageOne"></div> 
    <span id="txtOne" class="clTxtOne">Absolute Fun</span> 
    <span id="txtTwo" class="clTxtTwo">Some Text</span> 
    <span id="txtThree" class="clTxtThree">Another Text</span> 
    <span id="slogan">Slogan here</span> 
</div> 

JS :

$('#mainCanvas').html2canvas({ 
    background : undefined, 
    logging: true, 
    taintTest: false, 

    onrendered: function (canvas){ 
     //Set hidden field's value to image data (base-64 string) 
     $('#capturedImage').val(canvas.toDataURL("image/png")); 
     //Submit the form manually 
     document.getElementById("saveImageForm").submit(); 
    }, 
}); 

출력은 투명 이미지입니다. 내가 건너 뛸 수있는 문제 또는 내 코드를 렌더링하지 않는 다른 문제가있을 수 있습니다. 감사.

Answer 1

JSFiddle에서 작업을 재현하려고 시도하고 즉시 작동 시켰습니다. http://html2canvas.hertzen.com/documentation.html의 설명서를 사용했습니다.

은이 같은 함수를 작성하십시오 :

여기

html2canvas($("#mainCanvas"), { 
     onrendered: function(canvas) { 
      $('#capturedImage').val(canvas.toDataURL("image/png")); 
      document.getElementById("saveImageForm").submit(); 
     } 
    }); 

내 JSFiddle 작업 예와는 ... "변경 배경 색상"버튼을 눌렀을 때 배경을 변경 시도하고 다음 Enter 키를 눌러 생성하기 위해 "새로 추가"입니다 HTML div "mainCanvas"에서 본문에 새 캔버스를 추가합니다.