Question

我有一个html标签画布。

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

我可以成功使用它，而且看起来确实不错，如我所愿。问题在于转换为png.Canvas2Image使用html2canvas来实现。 html2canvas控制台记录错误：未捕获（承诺）未定义。 Canvas2Image控制台记录未捕获（承诺）的DOMException：无法在“ CanvasRenderingContext2D”上执行“ drawImage”：image参数是宽度或高度为0的画布元素。我可以很好地理解该错误，画布具有宽度和高度！=0。有什么想法吗？

html2canvas代码：

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

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


    console.log(imageData9);
  });

Answer 1

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/canvas2image@1.0.5/canvas2image.min.js"></script>

Answer 2

经过测试的Chrome，Firefox可以，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" />

html2canvas未捕获（承诺）未定义

2 个答案: