의견 : HTML5 Canvas 컨텐츠를 이미지로 저장하는 주요 아이디어는 캔버스 자체 API -TodaLaurl ()을 사용하여 구현하는 것입니다. 특정 구현은 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.
주요 아이디어는 캔버스 자체 API -Todataurl ()을 사용하여 전체 구현을 구현하는 것입니다.HTML + JavaScript 코드는 간단합니다.
<html>
<meta http-equiv = "x-ua 호환"내용 = "chrome = 1">
<헤드>
<cript>
Window.onload = function () {
그리다();
var savebutton = document.getElementById ( "saveImageBtn");
BindButtonevent (SaveButton, "Click", SaveImageInfo);
var dlbutton = document.getElementById ( "downloadImageBtn");
bindbuttonevent (dlbutton, "click", saveaslocalimage);
};
함수 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)"; // 검은 색
ctx.filltext ( "Gloomyfish -Demo", 50, 50);
}
함수 bindbuttonevent (요소, 유형, 핸들러)
{
if (element.addeventListener) {
element.addeventListener (유형, 핸들러, 거짓);
} 또 다른 {
요소 .ATTACHEVENT ( 'on'+유형, 핸들러);
}
}
함수 saveImageInfo ()
{
var mycanvas = document.getElementById ( "thecanvas");
var image = mycanvas.todataurl ( "image/png");
var w = wind
w.document.write ( "<img src = '"+image+" />