JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<canvas width="150" height="150"></canvas>

JavaScript

// на этот код не обращайте внимания- он нужен исключительно для примера, вам он не понадобится
	draw();
	function draw() {
		var canvas = document.getElementsByTagName('canvas')[0];
		if (canvas.getContext) {
			var ctx = canvas.getContext('2d');
			ctx.fillRect(25,25,100,100);
			ctx.clearRect(45,45,60,60);
			ctx.strokeRect(50,50,50,50);
		}
	}
// на этот код не обращайте внимания- он нужен исключительно для примера, вам он не понадобится



// а вот этот код как раз то что вам нужно. Функция saveAsPNG() возвращает готовое изображение в виде строки
	
	console.log(saveAsPNG());	// для примера ее можно использовать таким образом, в консоли вы увидите длиную строку символов- это и есть картинка ПНГ
	
	function saveAsPNG(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var dataURL = canvas.toDataURL();
		var imageData = canvas.src = dataURL;
		var image = new Image();
	    image.src = imageData;
	    var canvasPNG = image.src = imageData;
	    return canvasPNG;
	}
// а вот этот код как раз то что вам нужно. Функция saveAsPNG() возвращает готовое изображение в виде строки