canvas.toDataURL()을 사용하여 canvas를 이미지로 저장하는 방법?
현재 HTML5 웹 앱/Phonegap 네이티브 앱을 만들고 있는데 캔버스를 이미지로 저장하는 방법을 찾을 수 없는 것 같습니다.canvas.toDataURL()누가 나 좀 도와줄 수 있어요?
여기 코드가 있습니다, 무슨 문제가 있나요?
//제 캔버스 이름은 "canvasSignature"입니다.
JavaScript:
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>
Javascript:
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();
이것을 시도할 수 있습니다. 더미 HTML 앵커를 만들고 거기서 이미지를 다운로드합니다. 예를 들어...
// 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();
}
canvas2 이미지를 사용하여 다운로드를 요청할 수 있습니다.
저도 같은 문제가 있었습니다. 다음은 이미지를 페이지에 추가하고 브라우저에서 강제로 다운로드하는 간단한 예입니다.
<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>
이 기능을 수행하는 작은 라이브러리를 만들었습니다(다른 편리한 변환과 함께).이것은 reig라고 불리는데, 정말 사용하기 쉽습니다.
ReImg.fromCanvas(yourCanvasElement).toPng()
1000Bugy의 답변과 비슷하지만 즉시 앵커를 만들고 클릭 이벤트를 수동으로 발송할 필요가 없기 때문에 더 간단합니다(그리고 IE 수정).
다운로드 버튼을 앵커로 만들면 기본 앵커 기능이 실행되기 직전에 하이잭을 할 수 있습니다.onAnchorClick앵커 href를 캔버스 base64 이미지로 설정하고 앵커 다운로드 속성을 이미지 이름으로 지정할 수 있습니다.
이것은 다운로드 속성을 구현하지 않고 데이터 uris의 다운로드를 방지하기 때문에 (현재) IE에서 작동하지 않습니다.그러나 이 문제는 다음을 사용하여 해결할 수 있습니다.window.navigator.msSaveBlob대신.
서 " 따서앵클이위핸는들다같음다습니과러트치벤커릭라위(▁handler같다니▁so▁would습▁event:과다치▁clickwhere음▁anchor▁be▁your:anchor,canvas그리고.fileName범위 조회):
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());
}
}
이 작업은 저에게 적합합니다. (구글 크롬만 해당)
<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>
나는 이 목적을 위해 간단한 타자기 기능을 만들고, 자바스크립트와 함께 사용할 유형을 삭제합니다.
//ImagePath == canvas.toDataUrl()
private saveImage(imagePath: string, imageName: string ){
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link)
link.setAttribute('download', imageName + '.png');
link.setAttribute('href', imagePath.replace("image/png", "image/octet-stream"));
link.click();
}
//function call
saveImage(canvas.toDataURL(), "myName")
에 에.imageElement.src = myImage;은 야합다니해를 사용해야 .window.location = myImage;
그 후에도 브라우저는 이미지 자체를 표시합니다.마우스 오른쪽 단추를 클릭하고 "링크 저장"을 사용하여 이미지를 다운로드할 수 있습니다.
자세한 내용은 이 링크를 참조하십시오.
캔버스의 기본 64 이미지를 저장할 이미지 개체를 만들어야 합니다.그런 식으로 당신의 이미지는imageElement그러면 참을 수 있습니다.src속성값.
function putImage(){
var canvas1 = document.getElementById("canvasSignature");
var imageObject = new Image();
imageObject.src = canvas1.toDataURL("image/png");
var imageElement = document.getElementById("MyPix");
imageElement.src = imageObject.src;
}
자동으로 이미지 저장
하면 이미지를 자동으로 할 수 .src로서 가치를 부여하는.href링크의.그런 다음 다음 다음을 사용하여 클릭을 시뮬레이션합니다.click()메서드가 JavaScript에 있습니다.
function putImage(){
var canvas1 = document.getElementById("canvasSignature");
var imageObject = new Image();
imageObject.src = canvas1.toDataURL("image/png");
var imageElement = document.getElementById("MyPix");
imageElement.src = imageObject.src;
// Saving it locally automatically
let link = document.createElement("a");
link.setAttribute('download', "download")
link.href= imageElement.src
link.click()
}
ctx 뒤에 다음 행을 시도합니다.
var img = new Image();
img.crossOrigin = 'anonymous';
제가 작은 예를 하나 보여드릴 수 있습니다.
2개의 함수를 만들 수 있습니다.
URL에서 캔버스에 이미지를 그리려면(로컬/원격일 수 있음).
function loadCanvas(){ var c = document.getElementById("mycanvas"); var ctx = c.getContext("2d"); var img = new Image(); img.crossOrigin = 'anonymous'; img.addEventListener("load",()=>{ ctx.drawImage(img, 0, 0, 300, 450); }); //i have chosen a random image from the internet to display img.src = 'https://images.squarespace-cdn.com/content/v1/592df00e3a0411d38a6c0e88/1508276785945-S2PHOFE36SU6NN6K8F3Y/70db5-sunsetideahousesunsetideahouse.jpg'; }이미지 또는 디스플레이를 img 태그에 저장/게시하려면 다음과 같이 하십시오.
function copyimage(){ var c = document.getElementById("mycanvas"); var datanew = c.toDataURL("image/jpeg"); $(".imagecopy").html('<img src="'+datanew+'" width="300px" height="450px" />'); }
앞서 언급한 방법을 사용하여 Cordova에서 실행할 때 이미지를 다운로드할 수 없습니다.Cordova File 플러그인을 사용해야 합니다.이렇게 하면 저장할 위치를 선택하고 다양한 지속성 설정을 활용할 수 있습니다.자세한 내용은 https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/ 를 참조하십시오.
또는 이미지를 base64로 변환한 다음 localStorage에 문자열을 저장할 수 있지만 이미지가 많거나 고해상도인 경우 할당량을 매우 빠르게 채울 수 있습니다.
다운로드한 이미지에 대한 요소 참조를 사용할 수도 있습니다.
HTML:
<a download style="display:none" ref="imageDownloadRef"></a>
Javascript:
this.$refs['imageDownloadRef'].href = this.canvas.toDataURL({
format: 'jpeg',
quality: 1.0,
})
const imageDownloadLink = this.$refs.imageDownloadRef as HTMLElement
imageDownloadLink.click()
@Wardenclyff와 @SCOLvin, 둘 다 캔버스의 컨텍스트를 사용하지 않고 캔버스를 사용하여 이미지를 저장하려고 합니다.둘 다 ctx.toDataURL()을 시도해야 합니다. 시도:
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>
또한 다음 링크도 참조할 수 있습니다.
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' 카테고리의 다른 글
| Python에 mariadb 1.1.3 패키지 설치 (0) | 2023.08.26 |
|---|---|
| R 내에서 Excel 시트 범위를 사진으로 내보내는 방법 (0) | 2023.08.26 |
| 오류: 함수에 대한 이전 프로토타입이 없습니다.이 오류가 발생하는 이유는 무엇입니까? (0) | 2023.08.26 |
| 숫자가 10진수인지 확인합니다. (0) | 2023.08.26 |
| JDBC(mariaDB)를 통해 선택한 행의 기본 키 값을 검색하는 방법 (0) | 2023.08.26 |