현재까지 진행된 상황
- 나는 솔로 이름 테스트 할 이미지 업로드
- 업로드된 이미지를 teachable machine 을 사용하여 분석
- 분석 결과 나오면 결과화면으로 출력
작업 목적
- 결과화면을 카카오톡 공유를 통해서 공유
- 이때, 카카오톡 공유 할 때 이미지 주소를 넣게 되어있음
- 이때, 결과를 이미지로 만들어서 이미지로 넣고
- 카카오톡 공유 할 때 클릭 시 이동할 주소를 넣을 수 있는데
- 이때, 이동할 주소로 자신도 테스트 할 수 있도록 나는 솔로 테스트 주소 넣을 예정
작업 과정
1. 결과화면을 html2canvas 이용하여 이미지로 추출
2. 추출된 이미지를 서버에 hosting
3. 카카오톡 공유 (part 3)
과정 1. 결과화면을 html2canvas 이용하여 이미지로 추출
현재 결과 화면:
html2canvas 예제 코드:
import React, { useRef } from 'react';
import html2canvas from 'html2canvas';
const App = () => {
const componentRef = useRef(null);
const handleConvertToImage = () => {
html2canvas(componentRef.current).then((canvas) => {
const image = canvas.toDataURL('image/png'); // Change the format if needed
const link = document.createElement('a');
link.href = image;
link.download = 'react_component.png'; // Change the filename if needed
link.click();
});
};
return (
<div>
<div ref={componentRef}>
{/* Your React component content */}
<h1>Hello, world!</h1>
<p>This is a React component.</p>
</div>
<button onClick={handleConvertToImage}>Convert to Image</button>
</div>
);
};
export default App;
관련 코드: (똑같은 코드 사용)
const componentRef = useRef(null);
const handleConvertToImage = () => {
html2canvas(componentRef.current).then((canvas) => {
const image = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = image;
link.download = 'react_component.png';
link.click();
});
};과정 2. 추출된 이미지를 서버에 임시 hosting
hosting 방법:
=> 카카오톡 공유 (이미지 업로드) 기능 사용:
카카오톡 공유 시 사용할 이미지에 대해서 업로드 기능을 제공함. 파일 용량 5MB 이하. 최대 100일까지 보관.
이미지 업로드 예제:
var files = document.getElementById('input-file').files;
Kakao.Share.uploadImage({
file: files,
})
.then(function(response) {
console.log(response.infos.original.url);
})
.catch(function(error) {
console.log(error);
});
여기서 문제:
request parameter file은 fileList 로서 input 으로 image를 받아야 한다.
Workaround:
html2canvas 로 얻는 canvas를 blob으로 전환한 뒤 blob을 file로 변환
관련 코드:
var canvas = document.getElementById('yourCanvasId');
canvas.toBlob(function(blob) {
var file = new File([blob], "image.png", {type: "image/png", lastModified: Date.now()});
// Now 'file' is a File object representing your canvas image.
}, "image/png");
여기서 문제:
file을 add 할 fileList가 필요한데 local file을 다루는 fileList를 인위적으로 수정할 수 없다 (유저 privacy/security 문제)
Workaround:
datatransfer class 사용
관련 코드:
function createFileList(files) {
const dataTransfer = new DataTransfer();
for (let file of files) {
dataTransfer.items.add(file);
}
return dataTransfer.files;
}
// Usage:
const file1 = new File(["content"], "file1.txt", { type: "text/plain" });
const file2 = new File(["content"], "file2.txt", { type: "text/plain" });
const fileList = createFileList([file1, file2]);
이미지 업로드 진행 (최종 코드):
const handleConvertToImageAndUploadAndShare = () => {
html2canvas(componentRef.current).then((canvas) => {
canvas.toBlob(function(blob) {
var file = new File([blob], "image.png", {type: "image/jpeg", lastModified: Date.now()});
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
Kakao.Share.uploadImage({
file: dataTransfer.files,
})
.then(function(response) {
console.log(response.infos.original.url);
})
.catch(function(error) {
console.log(error);
});
}, "image/jpeg");
});
};
필요사항:
- kakao javascript sdk cdn을 head에 include
- kakao.init 을 통해 kakao 객체 initialize
여기서 문제:
- kakao initialize가 완성되지 전에 page가 load되어 kakao 객체를 찾지 못함 ('Kakao' is not defined)
Workaround:
- kakao 객체를 useEffect를 활용하여 init
function App() {
useEffect(() => {
if (window.Kakao) {
const kakao = window.Kakao;
if (!kakao.isInitialized()) {
kakao.init('2a0e55e39e3595fb4c32b31dcf0871aa');
}
}
}, []);
}- kakao 객체가 initialize 됬는지 확인 후 없으면 return, 있으면 진행
if (window.Kakao) {
const kakao = window.Kakao;
if (!kakao.isInitialized()) return;
kakao.Share.uploadImage({
file: dataTransfer.files,
})
.then(function(response) {
console.log(response.infos.original.url);
})
.catch(function(error) {
console.log(error);
});
}
실행 결과:
