借助toDataURL实现将HTML5 Canvas的内容保存为图片

前端开发教程 2025-02-21 0

将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API – toDataURL()来实现，具体实现如下，感兴趣的朋友可以参考下哈，希望对你有所帮助
主要思想是借助Canvas自己的API – toDataURL()来实现，整个实现
HTML + JavaScript的代码很简单。

<html> 
<meta http-equiv=X-UA-Compatible content=chrome=1> 
<head> 
<script> 
window.onload = function() { 
draw(); 
var saveButton = document.getElementById(saveImageBtn); 
bindButtonEvent(saveButton, click, saveImageInfo); 
var dlButton = document.getElementById(downloadImageBtn); 
bindButtonEvent(dlButton, click, saveAsLocalImage); 
}; 
function draw(){ 
var canvas = document.getElementById(thecanvas); 
var ctx = canvas.getContext(2d); 
ctx.fillStyle = rgba(125, 46, 138, 0.5); 
ctx.fillRect(25,25,100,100); 
ctx.fillStyle = rgba( 0, 146, 38, 0.5); 
ctx.fillRect(58, 74, 125, 100); 
ctx.fillStyle = rgba( 0, 0, 0, 1); // black color 
ctx.fillText(Gloomyfish - Demo, 50, 50); 
} 
function bindButtonEvent(element, type, handler) 
{ 
if(element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else { 
element.attachEvent('on'+type, handler); 
} 
} 
function saveImageInfo () 
{ 
var mycanvas = document.getElementById(thecanvas); 
var image = mycanvas.toDataURL(image/png); 
var w=window.open('about:blank','image from canvas'); 
w.document.write(<img src='+image+' alt='from canvas'/>); 
} 
function saveAsLocalImage () { 
var myCanvas = document.getElementById(thecanvas); 
// here is the most important part because if you dont replace you will get a DOM 18 exception. 
// var image = myCanvas.toDataURL(image/png).replace(image/png, image/octet-stream;Content-Disposition: attachment;filename=foobar.png); 
var image = myCanvas.toDataURL(image/png).replace(image/png, image/octet-stream); 
window.location.href=image; // it will save locally 
} 
</script> 
</head> 
<body bgcolor=#E6E6FA> 
<p> 
<canvas width=200 height=200 id=thecanvas></canvas> 
<button id=saveImageBtn>Save Image</button> 
<button id=downloadImageBtn>Download Image</button> 
</p> 
</body> 
</html>

运行效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关文章