현제 다음 그림처럼 카카오톡 공유하기 기능을 메시지 템플릿을 이용하여 사용하고 있습니다.
저 계란 이미지가 나오는 곳에 크기를 따로 변경할 수 있는지 궁금합니다. 감사합니다.
안녕하세요. 
카카오톡 공유하기 기능에서 미리보기 이미지의 크기를 변경하고 싶으신가요?
현재는 메시지 템플릿을 사용하여 공유하기 기능을 구현하고 계신 것 같습니다.
이미지 크기를 변경하려면 imageWidth와 imageHeight 파라미터를 사용하여 이미지 크기를 지정할 수 있습니다.
예를 들어, Kakao.Share.sendCustom() 함수를 사용하여 공유하기 기능을 구현할 때, 다음과 같이 이미지 크기를 지정할 수 있습니다.
Kakao.Share.sendCustom({
// ...
templateArgs: {
// ...
imageWidth: 400,
imageHeight: 300,
// ...
},
// ...
});
이렇게 하면, 공유하기 기능에서 사용되는 미리보기 이미지의 크기가 400x300으로 변경됩니다.
이 방법으로 이미지 크기를 변경할 수 있습니다.
참고로, 카카오톡 공유하기 기능의 이미지 크기 제한은 1024x1024픽셀입니다.
디벨로퍼스 도구 > 메시지 템플릿 메뉴에서 메시지 내용을 구성하고, 템플릿ID를 코드에 기재하여 파라메터 전달하는 "커스텀 템플릿"방식 카카오톡 공유는 input 박스에 ${imageWidth}와 같이 파라메터 설정 할 수 있습니다.
코드에서는 templateArgs에 파라메터를 설정하여 전달합니다.
와 빠른답변 감사합니다!!
짱짱
혹시 100100도 가능한가요?
지금 200 100은 변경이되지만
100*100은 안되네요
useEffect(() => {
if (typeof window !== "undefined" && window.Kakao) {
// Kakao SDK가 로드되었는지 확인 후, 커스텀 버튼 생성
window.Kakao.Share.createCustomButton({
container: "#kakaotalk-sharing-btn",
templateId: 111057, // 실제 사용중인 템플릿 ID로 대체해야 합니다.
templateArgs: {
title: `칼로리: ${result.total_calories} kcal`,
description: description,
imageUrl: uploadedImageUrl || "",
imageWidth: 100,
imageHeight: 100,
},
});
}
}, []); // 빈 배열을 사용하여 마운트 시에만 실행되도록 설정
아 그리고 위에 사진도
width가 200, 150 이렇게 들어가는데 보내는 텍스트 박스의 사이즈 자체를 줄일 수 없는건가요?
네, 위에 캡쳐한 테스트 사례와 같이 사이즈와 무관하게 비율로 표기 되어 1:1 또는 2:1 비율에 이미지를 조정해보시면 좋을 것 같아요.