Блог

Главная - Вопросы по программированию - dom для библиотеки изображений генерирует изображение низкого качества

dom для библиотеки изображений генерирует изображение низкого качества

#javascript

#javascript

Вопрос:

Я использовал dom-to-image для загрузки содержимого div в виде изображения, но это дает мне изображение низкого качества, которое не понятно моему коду :

 <script> 
    var node = document.getElementById('my-certificate');
    var btn = document.getElementById('download-btn');

    var options = {
        quality: 0.99 
    };
    
    btn.onclick = function() {
      domtoimage.toBlob(node, options)
        .then(function(blob) {
          window.saveAs(blob, 'my-certification.png');
        });
    
    }
</script>

есть идеи о том, как повысить качество?

Комментарии:

1. Насколько я понимаю из документации ( github.com/tsayen/dom-to-image ), quality опция актуальна только для изображений в формате JPEG ( toJpeg() функция); вы пробовали сгенерировать файл .jpg вместо файла .png? Качество изображения остается неизменным?

2. у меня нет опыта работы с javascript, поэтому я не могу знать, как генерировать jpeg вместо png

3. все, что вам нужно сделать, это прочитать документацию по ссылке, которую я вставил в предыдущий комментарий; там вы найдете пример. В общем, всякий раз, когда вы используете стороннюю библиотеку, вам следует прочитать документацию … особенно, если у вас недостаточно опыта программирования, чтобы понять, что она делает, просто взглянув на код.

Ответ №1:

Используйте ширину и высоту в опциях, чтобы увеличить узел перед визуализацией изображения. (Если вы этого не сделаете, качество будет как при съемке экрана)

  var options = {
    quality: 0.99,
    width: 2000,
    height: 2000,
};

Комментарии:

1. этот код дает мне белое изображение размером 2000 X 2000, а мое изображение помещается в левый верхний угол белого изображения

2. <script> var node = document.getElementById(‘my-certificate’); var btn = document.getElementById(‘download-btn’); var options = { quality: 0.99, width: 4000, height: 4000, }; btn.onclick = function() { domtoimage.toJpeg(node, options) .then(function(img) { window.saveAs(img, ‘my-certification.jpeg’); }); } </script>

3. покажите мне свой htm-код «my-certificate», вам нужно увеличить его до большего размера, прежде чем вы получите изображение

4. может быть, размер слишком большой

5. мой html div я сделал его шириной 100% и адаптивным для любого размера экрана

Ответ №2:

Попробуйте это.

 var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale(' scale ')',
  transformOrigin: 'top left'
})

Это сработало для меня.