사용자가 캔버스를 저장할 수있는 간편한 방법이 있습니까?

나는 이것을 몇 시간 동안 해보려고 노력했다. 그리고 나는 성공없이 stackoverflow와 다른 사이트에서 찾을 수있는 모든 솔루션을 시도했다.사용자가 캔버스를 저장할 수있는 간편한 방법이 있습니까?

가장 주목할만한 점은 모든 솔루션이 완전히 또는 적어도 분명히 다른 것입니다. 그리고 wc3schools와 사이트에는 이와 같은 문제를 해결할 기본 방법이없는 것처럼 보입니다. 그래서 내가 함께 일하고 있어요 무엇이며, u는 볼 수

// JavaScript Document 

function draw() { 

    var canvas1 = document.getElementById('canvas1'); 

    if(canvas1.getContext) { 
     var ctx = canvas1.getContext('2d'); 

     //Here's a lot of drawing that I've removed to make everything that's relevant more readable. 

    } 
}

나는이 몸이 간단한 HTML-문서가 :

<body onload="draw();"> 

<canvas id="canvas1" width="500" height="500"></canvas> 

</body>

그리고 이것은 JS-문서 나는 그 코드가 캔버스를 저장하는 것을 알아야 할 필요가 없기 때문에 캔버스에 드로잉하는 모든 코드를 제거했다.

내가 저장하는 형식이나 저장 방법을 캔버스에서 마우스 오른쪽 버튼을 클릭하여 구현해야하는 버튼을 클릭하는 방법과 상관없이, 나는 단지 알고 싶다. 가능한 가장 간단한 방법으로 그것을하는 방법!

출처

2014-03-24 Jonatan Stenbacka

"단순함"은 다른 사람들에게 다른 것을 의미합니다. 그러나 새 브라우저 탭에'canvas.toDataURL'을 표시하고 사용자가 마우스 오른쪽 버튼으로 클릭하여 저장하도록하는 것은 간단하며 대부분의 브라우저에서 작동합니다. 사용자 검증을 피하려고 시도함으로써 솔루션이 "단순 해"지려고하는 솔루션은 브라우저 보안과 충돌 할 가능성이 큽니다. – markE

[canvas.toDataURL()을 사용하여 캔버스를 이미지로 저장하는 방법?] (http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas) -todataurl) – Charles

나는 이것을 아주 간단한 방법으로 결국 달성 할 수있었습니다. 이 간단한 코드는 다른 그림처럼 사용자가 캔버스를 마우스 오른쪽 버튼으로 클릭하고 저장하는 데 필요한 모든 것입니다. 구현이 간단 할뿐만 아니라 인터넷에서 사진을 저장하는 방식이므로 가장 바람직한 솔루션이라고 생각합니다.

var saveImage = canvas1.toDataURL("image/png").replace("image.png", "saveImage/octet-stream"); 
window.location.href = saveImage;

"canvas1"는 I 저장할 캔버스의 이름 및 "이미지/PNG로"내 코드와 아무 상관이 있지만, 우리가 대체 몇 가지 기본 이름입니다 "saveImage/octet-stream을" ,이 경우 내 캔버스입니다.

이 코드의 기능을 자세히 설명 할 수는 없지만 작동합니다!

출처

2014-03-26 10:09:55

사용자가 캔버스를 저장할 수있는 간편한 방법이 있습니까?

답변

관련 문제