Html2canvas를 사용하여 캔버스 요소를 저장할 때 오류가 발생했습니다.

클릭 한 번으로 스크린 샷을 만들고 PC에 이미지를 저장하려고합니다. 이를 위해 html2canvas 플러그인을 사용하고 있습니다. 여기에 클릭이 "저를 저장"과 이미지를 저장할 때 좋은 작업Html2canvas를 사용하여 캔버스 요소를 저장할 때 오류가 발생했습니다.

<body id="add" style="background-color: white">  
    <label id="contact" style="float: right; cursor: pointer;">Save Me</label> 
    <h4>My Name Is <b>SUBHAJYOTI</b> <span style="color:red">MITRA</span></h4>   
    <script> 
     $(function() { 
      $('#contact').on('click', function() { 
       html2canvas($("#add"), { 
        onrendered: function(canvas) { 
         var link = document.createElement('a'); 
         link.download = "ScreenShot.jpeg"; 
         link.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 
         link.click(); 
        } 
       }) 
      }); 
     });   
    </script> 
</body>

그것의 내 코드입니다. 그러나 이미지의 배경은 검은 색이되었습니다. enter image description here 위 사진과 동일합니다. 제발 도와주세요.

출처

2015-02-04 Subho

그래, 문제가 해결됩니다. 나는 이유를 모른다. 그러나 문제는 jpeg와 함께있다. png로 확장 jpeg를 변경하면 문제가 해결됩니다.

link.download = "ScreenShot.png"; 
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

출처

2015-02-04 07:52:38 Subho

JPEG 이미지 포맷과 캔버스 '기본 투명 픽셀이 RGBA (0,0,0,0)''로 설정되어 있는지 알파 채널이 없기 때문에 * (당신이 다른 투명 명시 적으로 설정하는 경우에도 'rgba (0,255,0,0)') * 같은 알파 채널을 제거하면'rgb (0,0,0)'을 남깁니다. 이 문제를 해결하기 위해 캔버스 배경에 흰색 사각형을 그릴 수 있습니다. – Kaiido

Html2canvas를 사용하여 캔버스 요소를 저장할 때 오류가 발생했습니다.

답변

관련 문제