html2canvas Uncaught (in promise) undefined

0
votes

I have a html tag canvas.

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

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 code:

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

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


    console.log(imageData9);
  });
2
javascripthtmlcanvashtml2canvas
Did you ever get this figured out? @Cache - FabricioG

2 Answers

0
votes

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" />
-1
votes

html2canvas is used for converting html code into a canvas view. If I am understanding correctly, you just want to get an image from the canvas so html2canvas is not needed. Simply just use Canvas2Image on it's own.

Example (blue is the image, red is the canvas):

// 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>