html5 canvas 이미지 저장을 어떻게 해야 할까요?

by tree posted Feb 08, 2018
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

+ - Up Down Comment Print

아래와 같은 소스로 이미지와 텍스트를 합쳐서
html5 캔버스를 이용하여 이미지를 만드는데 성공하였습니다.

그런데 이것을 pc로 저장하고 싶은데요
익스에서 오른쪽 클릭해서 저장하거나
아래에 "저장하기"버튼을 만들어서요

현재는 마우스 오른쪽 클릭해도 저장메뉴가 활성화가 안됩니다.
(크롬에서는 저장이 됩니다...익스에서만 안되요)

어떻게 하면 이미지로 내 pc에 저장 할 수 있을까요?

toDataURL()을 이용하면 된다고 해서 이렇게저렇게 해봤는데 잘 안되네요

이 이미지를 저장할수 있는 방법을 알려주세요~~~


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Test</title>
 
 
<script type="text/javascript">
 
<!--
function draw(){
    var canvas = document.getElementById("g");
    var ctx = canvas.getContext("2d");
    
  var img = new Image( );
    img.src = "222.jpg";
    img.onload = function() {
        ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, 722, 1331);
        ctx.font = "20px NanumGothic";
        ctx.fillText("안녕하세요",40,160);
    };
 
  }; 
 
// -->
 
</script>
</head>
 
<body onload="draw()">
 
<canvas id="g" width="722" height="1331"></canvas>
 
</body>
 
</html>



Articles

1 2 3 4 5 6 7

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5