캔버스를 로컬 컴퓨터에 이미지로 저장

로컬 컴퓨터에 캔버스를 저장하려고하는데 아무 것도 작동하지 않습니다. 아래 코드를 확인하십시오.캔버스를 로컬 컴퓨터에 이미지로 저장

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 

    </style> 

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    </head> 

    <body> 
    <canvas id="myCanvas" width="578" height="400"></canvas> 
    <img id="canvasImg" alt="Right click to save me!"> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 


     var imageObj = new Image(); 

     imageObj.onload = function() { 
     context.drawImage(imageObj, 69, 50); 

     // 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(); 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

     var imageData = canvas.toDataURL(); 


    </script> 
    </body> 
</html>

이 예제 코드에서는 일부 이미지와 구름을 드레 이닝하고 이미지 파일로 저장 하시겠습니까 ???

출처

2013-08-14 anam

당신은 다른 도메인에서 이미지에 의해 "오염"된 캔버스를 저장할 수 있습니다. https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image – Sacho

Sacho가 언급했듯이 '캔버스를 훼손하면 구원이 중단됩니다. This is a security feature으로 타사 웹 사이트의 데이터를 캡처하지 못하게합니다.

한 가지 해결 방법은 자신의 웹 사이트에서 모든 정적 이미지를 제공하는 것입니다. 이 작업은 서버가 타사 사이트의 요청에 따라 이미지를 다운로드하고 데이터 스트림을 반환함으로써 수행 할 수 있습니다 (마치 자신의 도메인에있는 것처럼). 그런 다음 브라우저는 감염된 서버에 대해 불만을 제기하지 않습니다.

나는 서버 측 기술이 무엇인지 모른다, 그래서 특정 구현을 제안 할 수는 없지만 기본적으로 같은 요청을 생성 할 수있는 : 소스 URL이 제공됩니다

/imagerequest.php?url=http%3A%2F%2Fwww.html5canvastutorials.com%2Fdemos%2Fassets%2Fdarth-vader.jpg

매개 변수 및 imagerequest.php (또는 aspx) 등 귀하의 서버 스크립트입니다.

출처

2013-08-14 08:37:57

XMLHTTPRequest 또는 fetch을 통해 서버에 imageData을 보내보세요. 이런 식으로 뭔가 :

const canvas = document.getElementById('cvs'); 
const context = canvas.getContext('2d'); 
context.font = '26pt Arial'; 
context.fillText('Some example text!', 10, 40); 

url = canvas.toDataURL(); 
fetch('/yoururl', { method: 'POST', body: new FormData(url)}) 
.then(res => console.log(res))

어쩌면 this link이 너무

출처

2013-08-14 10:18:58 m0sk1t

일부 코드를 게시하십시오. 나중에이 링크가 잘못된 참조를 얻는다면 귀하의 게시물은 적절한 답변이되지 않습니다. –

캔버스를 로컬 컴퓨터에 이미지로 저장

답변

관련 문제