Question

我想要做的是将我本地保存的图像绘制到画布上。然后我想将该画布转换为png图像。图像在画布上加载，但我创建的png图像为空白。有谁知道如何解决这个问题？

＆＃13;

<!DOCTYPE html>
<html>
	<head>

	</head>
	<body>
		<img src="" id="canvasImage" />
		<canvas id="canvasId" width="160" height="145"></canvas>
		
		<script>
			
			var canvas = document.getElementById('canvasId');
			var context = canvas.getContext("2d");
			
			image = new Image();
			image.src = "images/rightarrow.png";
			image.onload = function(){
				context.drawImage(image, 0, 0);
			}
			
			var imgTag = canvas.toDataURL("image/png");
			document.getElementById("canvasImage").src = imgTag;
		
		</script>
		
	</body>
</html>

＆＃13;

Answer 1

您需要在onload处理程序

中创建图像

        image = new Image();
        image.src = "images/rightarrow.png";
        image.onload = function(){
            context.drawImage(image, 0, 0);
            var imgTag = canvas.toDataURL("image/png");
            document.getElementById("canvasImage").src = imgTag;
        }

HTML5画布toDataURL无法使用画布上的图像

1 个答案: