웹 화면 캡쳐 후 바로 카카오톡 이미지 공유하는 방법

JavaScript
#1

안녕하세요
저번에 이미지를 저장하지 않고 바로 공유가 가능한지 질문했었는데 이해가 잘 안돼서 다시 질문 드립니다ㅎ

제가 현재 어플에서 웹뷰를 띄우고 있는데요
웹에서 현재 화면을 캡쳐하면 이미지의 값이 base64(data:image…) 값으로 넘어오는데
이 값으로 이미지를 공유할 수 있을까요?

지금 하고있는 건 base64로 넘어온 값을 Kakao.Link.uploadImage()로 업로드 후 결과값인 이미지 URL을
Kakao.Link.sendDefault()로 공유하고 있는데 uploadImage할 때
’Illegal argument for “file” in Link.uploadImage’
라는 에러가 계속 떠서 처음에 넘기고 있는 base64값이 문제인 것 같아서요…

Kakao.Link.uploadImage() 와 Kakao.Link.scrapImage()가 무슨 차이인지,
Kakao.Link.scrapImage()를 사용해야하는건지,
각각 넘기는 imageUrl 파라미터에 정확히 어떤 값을 넣어야 하는건지 잘 모르겠습니다ㅠㅠ

자세히 알려주시면 정말 감사하겠습니다!!ㅎㅅㅎ

#2 
    Link.uploadImage = function (settings) {
      settings = _k.processRules(settings, rules.uploadImage, 'Link.uploadImage');
      return uploadImageRequest(settings);
    };

    function uploadImageRequest(settings) {
      return _api.request({
        url: '/v2/api/talk/message/image/upload',
        data: {
          file: settings.file
        }
      });
    };

    Link.scrapImage = function (settings) {
      settings = _k.processRules(settings, rules.scrapImage, 'Link.scrapImage');
      return scrapImageRequest(settings);
    };

    function scrapImageRequest(settings) {
      return _api.request({
        url: '/v2/api/talk/message/image/scrap',
        data: {
          image_url: settings.imageUrl
        }
      });
    }

코드를 보면 그냥 scrpImage 와 uploadImage 의 차이는 imageURL 혹은 File 차이인 것 같네요
이미지가 base64 데이터라면, File 로 한번 Convert 해서 넘겨주면 동작하지 않을까요?

Base64 Image -> Blob -> File

https://stackoverflow.com/questions/16968945/convert-base64-png-data-to-javascript-file-objects/16972036
https://codeday.me/ko/qa/20190306/7131.html
https://heropy.blog/2019/02/28/blob/

#3

image
링크 남겨주신거 참고해서 File로 변환해서
제가 저 File 값을 Kakao.Link.uploadImage에 ‘file’ 파라미터 값으로 넘겼는데 업로드 할 게 없다고 나와요ㅠㅅㅠ
파라미터가 아니라 다른 게 문제인걸까요…?

#4 
  var files = document.getElementById('file').files;
  Kakao.Link.uploadImage({
    file: files
  }).then(function(res){
    document.getElementById('uploadUrl').value = res.infos.original.url
  });

example을 보시면, File 객체를 넘겨주는게 아닌, File 객체를 가지고 있는
FileList(document.querySelector(‘xx’).files) 객체를 바로 넘겨주는데요
FileList 를 넘겨주셔야 정상적으로 동작할거같네요(배열로 감싸도 별 차이는 없지 않을까 싶습니당)

#5

아 그렇네요!!
배열로 감싸니까 됐어요
감사합니다ㅠㅠ

1개의 좋아요