html2canvas未捕获（已承诺）未定义 [英] html2canvas Uncaught (in promise) undefined

问题描述

我有一个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未捕获（已承诺）未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！