canvas.toDataURL ()을 사용하여 캔버스를 이미지로 저장하는 방법?
현재 HTML5 웹 앱 / Phonegap 기본 앱을 만들고 있는데로 캔버스를 이미지로 저장하는 방법을 알 수 없습니다 canvas.toDataURL(). 누군가 나를 도울 수 있습니까?
여기 코드가 있는데, 무엇이 잘못 되었나요?
// 내 캔버스 이름은 "canvasSignature"
자바 스크립트 :
function putImage()
{
var canvas1 = document.getElementById("canvasSignature");
if (canvas1.getContext) {
var ctx = canvas1.getContext("2d");
var myImage = canvas1.toDataURL("image/png");
}
var imageElement = document.getElementById("MyPix");
imageElement.src = myImage;
}
HTML5 :
<div id="createPNGButton">
<button onclick="putImage()">Save as Image</button>
</div>
다음은 몇 가지 코드입니다. 오류없이.
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
window.location.href=image; // it will save locally
이 솔루션을 사용하면 다운로드 한 파일의 이름을 변경할 수 있습니다.
HTML :
<a id="link"></a>
자바 스크립트 :
var link = document.getElementById('link');
link.setAttribute('download', 'MintyPaper.png');
link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();
canvas2image 를 사용 하여 다운로드하라는 메시지를 표시 할 수 있습니다 .
나는 같은 문제가 있었는데, 여기에 이미지를 페이지에 추가하고 브라우저가 강제로 다운로드하도록하는 간단한 예가 있습니다.
<html>
<head>
<script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
<script>
function 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);
}
function to_image(){
var canvas = document.getElementById("thecanvas");
document.getElementById("theimage").src = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);
}
</script>
</head>
<body onload="draw()">
<canvas width=200 height=200 id="thecanvas"></canvas>
<div><button onclick="to_image()">Draw to Image</button></div>
<image id="theimage"></image>
</body>
</html>
나는 이것을 수행하는 작은 라이브러리를 만들었습니다 (다른 편리한 변환과 함께). reimg 라고 하며 사용이 정말 간단합니다.
ReImg.fromCanvas(yourCanvasElement).toPng()
This work for me: (Only google chrome)
<html>
<head>
<script>
function 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);
}
function downloadImage()
{
var canvas = document.getElementById("thecanvas");
var image = canvas.toDataURL();
var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click");
aLink.download = 'image.png';
aLink.href = image;
aLink.dispatchEvent(evt);
}
</script>
</head>
<body onload="draw()">
<canvas width=200 height=200 id="thecanvas"></canvas>
<div><button onclick="downloadImage()">Download</button></div>
<image id="theimage"></image>
</body>
</html>
Similar to 1000Bugy's answer but simpler because you don't have to make an anchor on the fly and dispatch a click event manually (plus an IE fix).
If you make your download button an anchor you can highjack it right before the default anchor functionality is run. So onAnchorClick you can set the anchor href to the canvas base64 image and the anchor download attribute to whatever you want to name your image.
This does not work in (the current) IE because it doesn't implement the download attribute and prevents download of data uris. But this can be fixed by using window.navigator.msSaveBlob instead.
So your anchor click event handler would be as followed (where anchor, canvas and fileName are scope lookups):
function onClickAnchor(e) {
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
e.preventDefault();
} else {
anchor.setAttribute('download', fileName);
anchor.setAttribute('href', canvas.toDataURL());
}
}
Here's a fiddle
You can try this; create a dummy HTML anchor, and download the image from there like...
// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
var canvas = document.querySelector('#my-canvas');
var dataURL = canvas.toDataURL("image/jpeg", 1.0);
downloadImage(dataURL, 'my-canvas.jpeg');
});
// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
var a = document.createElement('a');
a.href = data;
a.download = filename;
document.body.appendChild(a);
a.click();
}
Here is the fiddle
Instead of imageElement.src = myImage; you should use window.location = myImage;
And even after that the browser will display the image itself. You can right click and use "Save Link" for downloading the image.
Check this link for more information.
@Wardenclyffe and @SColvin, you both are trying to save image using the canvas, not by using canvas's context. both you should try to ctx.toDataURL(); Try This:
var canvas1 = document.getElementById("yourCanvasId"); <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>
Also you may refer to following links:
http://tutorials.jenkov.com/html5-canvas/todataurl.html
http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element
참고URL : https://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl
'Programing' 카테고리의 다른 글
| MVC에 다시 쓴 후 GUI가 작동하지 않음 (0) | 2020.07.13 |
|---|---|
| Apache Thrift, Google Protocol Buffers, MessagePack, ASN.1 및 Apache Avro의 주요 차이점은 무엇입니까? (0) | 2020.07.13 |
| 단방향 및 양방향 JPA와 최대 절전 모드 연결의 차이점은 무엇입니까? (0) | 2020.07.13 |
| Android 기기에 신뢰할 수있는 CA 인증서를 설치하는 방법은 무엇입니까? (0) | 2020.07.13 |
| 구체적인 URL을 제외 할 수 있습니까? (0) | 2020.07.13 |