HTML5 Canvas 이미지 내보내기 및 서버 기능 업로드

HTML5 Canvas 이미지를 내보내고 서버에 업로드합니다.

최근 프로젝트에서는 퍼즐, 그림 편집 등 캔버스에 그림을 그려야 하는 필요성을 자주 접하게 됩니다. 캔버스에서 처리된 이미지에는 저장이 필요합니다.

따라서 다음 방법이 필요할 수 있습니다 ~

1. toDataURL() 메서드를 사용하여 캔버스 이미지를 내보내고 base64 데이터를 가져옵니다.

2. base64 데이터를 blob 객체로 캡슐화합니다.

3. FormData 조합

4.ajax 업로드

물론 업로드 과정에는 합의된 필드 등 크로스 도메인 설정 등 서버 측의 협조가 필요합니다. . .

간단한 데모:

 function handlerSave () { //base64 형식으로 이미지 데이터 내보내기 var mycanvas = document.getElementById(mycanvas); var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); //BLOB 객체 캡슐화 var blob = dataURItoBlob(base64Data); //양식 데이터 조립 var fd = new FormData(); fd.append(fileData, blob); //fileData는 사용자 정의됩니다. fd.append(fileName, 123jpg); //fileName은 요구 사항에 따라 임의로 생성되거나 하드 코딩됩니다. //ajax 업로드, ajax 형식은 임의적입니다. JQ 작성에는 문제가 없습니다. //도메인 간 요청을 허용하도록 서버를 설정해야 한다는 점에 유의해야 합니다. 데이터를 받는 방식은 <input type=file/>var xmlHttp = new XMLHttpRequest(); 업로드한 파일과 다르지 않습니다.(POST, 업로드 요청을 보낸 URL); localStorage.token);//요청 헤더 설정, 선택 사항 xmlHttp.send(fd); //ajax 콜백 xmlHttp.onreadystatechange = () => { //코드 실행... }; (base64Data) { var byteString; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]) else byteString = unescape(base64Data.split(' ,')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0] var ia = new Uint8Array(byteString.length) for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i) } return new Blob([ia], {type: mimeString});};

 function b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0; while (i < img.length) { img_buffer.push(img. charCodeAt(i)); i++; } return new Uint8Array(img_buffer);}var b64Image = canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(image, new Blob([ u8Image ], {type: image/jpg}) );var xhr = 새로운 XMLHttpRequest();xhr.open(POST, /api/upload, true);xhr.send(formData);

위 방법을 사용하면 프론트엔드에서 js를 통해 처리되며, 서버측에서는 추가적인 처리가 필요하지 않습니다.

가장 편리하고 직접적인 방법이라고 생각합니다. 하지만 좋아요가 높은 답변이 많고 서버에서 다양한 처리가 필요하므로 권장하지 않습니다.

캔버스 Base64로 인코딩된 이미지를 Uint8Array Blob으로 변환해야 했습니다.

참조: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

위 내용은 에디터가 소개한 HTML5 Canvas 이미지를 내보내고 서버에 업로드하는 기능입니다. 궁금하신 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!