我有一个 html 标签画布。
<canvas id="myCanvas"></canvas>
我可以成功地利用它，而且它看起来非常好，正如我想要的那样。
问题在于转换为 png。我使用 html2canvas 与 Canvas2Image 进行转换。 html2canvas 控制台记录错误：
未捕获（承诺）未定义。
Canvas2Image 控制台记录 Uncaught (in Promise) DOMException: Failed toexecute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. 我可以很好地理解该错误，画布具有宽度和高度!= 0. 有什么想法吗？
html2canvas代码：
html2canvas(document.getElementById('myCanvas')).then(canvas9 => {
var theimage9 = Canvas2Image.convertToPNG(canvas9);
var imageData9 = $(theimage9).attr('src');
console.log(imageData9);
});
测试过 Chrome、Firefox ok，IE 11 需要添加 2 个额外的 js 库来支持 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" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
