1. 홈
  2. 질의 응답
  3. 캔버스의 스크린 샷을 찍는 방법?

캔버스의 스크린 샷을 찍는 방법?

2013-05-28 7 views

답변

3

그것은 당신의 프레임 워크에 따라 다르지만 기본적으로 여기 canvas.toDataURL()

를 사용할 수있는 것은

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     // draw cloud 
     context.beginPath(); 
     context.moveTo(170, 80); 
     context.bezierCurveTo(130, 100, 130, 150, 230, 150); 
     context.bezierCurveTo(250, 180, 320, 180, 340, 150); 
     context.bezierCurveTo(420, 150, 420, 120, 390, 100); 
     context.bezierCurveTo(430, 40, 370, 30, 340, 50); 
     context.bezierCurveTo(320, 5, 250, 20, 250, 50); 
     context.bezierCurveTo(200, 5, 150, 20, 170, 80); 
     context.closePath(); 
     context.lineWidth = 5; 
     context.fillStyle = '#8ED6FF'; 
     context.fill(); 
     context.strokeStyle = '#0000ff'; 
     context.stroke(); 

     // save canvas image as data url (png format by default) 
     var dataURL = canvas.toDataURL(); 
    </script> 
    </body> 
</html>

dataUrl의 의지가 이미지가 포함 된 완벽한 예입니다 당신이 원하는 어디든지 당신이 그것을 저장할 수 있습니다.

출처

2013-05-28 13:04:17 Cybermaxs

7

원하는 작업에 따라 가장 쉬운 방법은 캔버스에서 toDataUrl을 사용하는 것입니다. 

canvas.toDataURL('png')

이

는이 

<a href="%dataURI%" download>download</a>

같은 다운로드 링크에서 사용할 수 또는 그냥 이미지 태그에 다시 DOM에 그것을 스틱,베이스 64에 캔버스를 인코딩합니다.

그런 다음 이미지에서 실제 복사본을 저장하려면 해당 base64를 이미지 파일로 변환하는 언어를 사용하여 더 많은 백엔드 컨트롤러를 작성할 수 있습니다.

대한 추가 정보를 원하시면,이 게시물을 참조

How to save a PNG image server-side, from a base64 data string

출처

2013-05-28 13:06:08

관련 문제

 관련 문제