У меня есть холст с тегом 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);
});
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" />
Вы когда-нибудь понимали это? @Cache