Html2canvas Uncaught (в обещании) undefined

У меня есть холст с тегом html.

<canvas id = "myCanvas"></canvas>

Я могу успешно рисовать на нем, и он выглядит действительно хорошо, как я и хотел. Проблема в преобразовании в png, я использую для этого html2canvas с Canvas2Image. Консоли html2canvas регистрируют ошибку: Непойманный (в обещании) undefined. Журналы консоли Canvas2Image Uncaught (в обещании) DOMException: не удалось выполнить 'drawImage' в 'CanvasRenderingContext2D': аргумент изображения является элементом холста с шириной или высотой 0. Я очень хорошо понимаю ошибку, холст имеет ширину и высоту ! = 0. Есть идеи?


html2canvas код:

    html2canvas(document.getElementById('myCanvas')).then(canvas9 => {

    var theimage9 = Canvas2Image.convertToPNG(canvas9);
    var imageData9 = $(theimage9).attr('src');


    console.info(imageData9);
  });

Вы когда-нибудь понимали это? @Cache

FabricioG 05.10.2018 21:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
5 093
2

Ответы 2

html2canvas используется для преобразования кода HTML в представление холста. Если я правильно понимаю, вы просто хотите получить изображение с холста, поэтому html2canvas не нужен. Просто используйте Canvas2Image самостоятельно.

Пример (синий - изображение, красный - холст):

// Example canvas with circle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();


var image = Canvas2Image.convertToPNG(c); // Returns HTMLImageElement 

$("#canvasImg").attr('src', image.src); // Set the src of our output image to the src of the HTMLImageElement
<!-- Output -->
<img id = "canvasImg" src = "" style = "border:2px solid blue;">

<!-- Input -->
<canvas id = "myCanvas" width = "200" height = "100" style = "border:2px solid red;"></canvas>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/canvas2image.min.js"></script>

Протестирован Chrome, Firefox в порядке, IE 11 требует добавления 2 дополнительных js-библиотек для поддержки обещания.

function takeSnapShot() {
	html2canvas(document.querySelector("#capture")).then(function(canvas9) {
		var theimage9 = canvas9.toDataURL("image/png");
		document.querySelector("#theimage9").src = theimage9; 
	});
}
<script src = "https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 
<script src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id = "capture" style = "padding: 10px; background: #f5da55">
    <h4 style = "color: #000; ">Hello world!</h4>
</div>
<input type = "button" value = "Capture" onclick = "takeSnapShot()"/>
<img id = "theimage9" border = "0" />

Другие вопросы по теме