Ошибка при сохранении элемента canvas с использованием Html2canvas

Я пытаюсь создать скриншот на клик и сохранить изображение на компьютере. Для этого я использую плагин html2canvas. вот мой кодОшибка при сохранении элемента canvas с использованием 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

Yup Я решаю проблему. Я не знаю, почему, но проблема в jpeg. Если я изменил расширение jpeg на png, проблема будет решена.

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

Ошибка при сохранении элемента canvas с использованием Html2canvas

ответ

Смежные вопросы