问题描述
我有一个html标签canvas。
I have a html tag canvas.
<canvas id="myCanvas"></canvas>
我可以成功使用它,而且看起来确实不错,就像我想要的那样。
问题出在到png的转换上。我将html2canvas与Canvas2Image一起使用。 html2canvas控制台记录错误:
未定义(承诺)。
Canvas2Image控制台日志未捕获(按承诺)DOMException:无法在'CanvasRenderingContext2D'上执行'drawImage':image参数是一个宽度或高度为0的canvas元素。我可以很好地理解该错误,canvas具有宽度和高度!=0。有什么想法吗?
I can draw on it successfully, and it looks really good, as i wanted to be.The problem is on the conversion to png.I use html2canvas for that with Canvas2Image. The html2canvas consoles logs an error:Uncaught (in promise) undefined.Canvas2Image console logs Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. I can understand the error very well, the canvas has width and height != 0. Any ideas?
html2canvas代码:
html2canvas code:
html2canvas(document.getElementById('myCanvas')).then(canvas9 => {
var theimage9 = Canvas2Image.convertToPNG(canvas9);
var imageData9 = $(theimage9).attr('src');
console.log(imageData9);
});
推荐答案
经过测试的Chrome,Firefox可以,IE 11需要添加2
Tested Chrome, Firefox ok, IE 11 needs adding 2 extra js library to support promise.
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" />
这篇关于html2canvas未捕获(已承诺)未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!