SVG 이미지와 CSS의 조합에서 PNG 이미지를 생성하여 Facebook을 통해 페이지를 공유하는 방법

알아채다

태그tutorial를 사용하더라도 기본적으로 제가 한 것을 적용할 수 있어야 합니다. 비슷한 상황이 발생할 경우를 대비하여 Trial and Error에 대한 시간을 계속 줄일 수 있다고 생각하여 태그를 추가했습니다.

배경

One of the clients at work Facebook을 통해 페이지를 공유할 때 아바타를 보여주고 싶었습니다. 그래서 나는 그들의 웹 애플리케이션이 og:image 및 관련 오픈 그래프 태그에 대한 URL을 생성할 수 있도록 해야 했습니다.

문제는 SVG Image related tags 와 CSS 의 조합으로 아바타를 보여주기 때문에 앱 내에 저장된 실제 PNG 이미지가 없다는 것입니다. 그래서 오픈 그래프 태그에 대한 로직을 수정하기 전에 아바타의 PNG 버전을 생성하는 방법을 생각해 내야 했습니다.

나는 동료들과 함께 불확실성을 해결하기 위해 몇 시간을 보내고 결국 다음과 같이 하게 되었습니다.

Frontend에서 최종 아바타 이미지 캡처(웹 브라우저)

이미지 데이터를 서버로 보내기

서버가 이미지 데이터로 PNG 이미지를 생성하도록 합니다.

웹 응용 프로그램이 URL을 제공할 수 있는 방식으로 PNG 이미지를 저장합니다.

그런 다음 그에 따라 Open Graph 태그를 생성합니다

.

귀찮은.

기존 Avatar 구성 요소를 수정하여 서버 측에서 Avatar를 렌더링한 다음 PNG 이미지로 변환하려고 시도할 수 있었지만 구성 요소에는 jQuery 일명 the code made by someone else or me in the past . 게다가, 그렇게 하면 기존 논리가 깨질 수 있습니다. 그래서 평소와 같이 spaghetti code but it works 경로를 선택했습니다.

해결책

처음에는 SVG 이미지를 PNG 이미지로 변환할 수 있는 Node.js 패키지를 사용하여 이러한 일이 발생하도록 하려고 했으나 아바타의 일부 비트가 CSS로 그려지므로 해당 패키지( CSS를 매개변수로 사용할 수 없기 때문에, 아마도 그렇게 할 수 있을 것입니다. 저는 그것을 확인하지 않았고, 거기로 돌아가서 작동하는 경우에 대비하여 추가 코드를 리팩토링하고 싶지 않습니다. 어쨌든, 나는 이것을 만들기 위해 html2canvas을 사용하게 되었습니다.

코드 예

이것은 웹 애플리케이션에 대한 정확한 코드는 아니지만 숙련된 웹 개발자라면 중요한 비트를 복사하고 스택 오버플로 페이지 등을 탐색하는 것을 피할 수 있어야 합니다.

프론트엔드

// This part gets thrown to Babel prior to being loaded by web browsers
// so that this ECMA Script works when the browser actually executes it

onAfterYourComponentRenderedAvatar() {

  const selector = '#container-for-avatar';
  const element = jQuery(selector);

  // Enable to revert the original size
  const width = element.width();
  const height = element.height();

  // Fix the size to make "html2canvas()" capture the Avatar properly
  // You may need to muck around more here to make that happen
  element.width(240).height(240);

  // Capture the Avatar made by the combination of SVG and CSS
  // Lucky this worked in my case
  html2canvas(
    document.querySelector(selector),
    {
      // Another part of making "html2canvas()" capture the Avatar properly
      // Skipping to think logically and/or amend other existing code
      scrollX : -9,
      // Make the background transparent, as the Avatar has the shape of circle in my case
      backgroundColor : null,
    },
  )
  .then((canvas) => {

    // Revert the Avatar Element to have the original size
    element.width(width).height(height);

    // Debug to see how it went
    // document.querySelector('#example-container').appendChild(canvas);

    // Send the image data to the server
    const opts = {
      method  : 'POST',
      headers : {
        Accept         : 'application/json',
        'Content-Type' : 'application/json',
      },
      // Not sure if I need this bit
      redirect    : 'follow',
      // I guess this is safe to put
      credentials : 'same-origin',
      // Main bit, you can buy me a cup of coffee forever
      body        : JSON.stringify({
        avatar : canvas.toDataURL('image/png'),
      }),
    };

    fetch(`/example/${id}/avatar/png`, opts);
  });
}

백엔드

/**
 * Save PNG Version of Avatar
 * in case App uses ExpressJS etc
 */
app.post(
  '/example/:id/avatar/png',
  (req, res) => {

    if (!req.body.avatar) {
      return; // or whatever
    }

    // Mumbo Jumbo Code prior to saving the PNG Version of Avatar here

    // Extract the image data from the request data
    const dataaaaaaaa = req.body.avatar.split(',')[1];
    const bufferrrrrr = Buffer.from(dataaaaaaaa, 'base64');

    // Save the image with "bufferrrrrr" or whatever you have to do
    // to enable your App to let us refer the image via URL so that Facebook can
    // I do not name variables like "bufferrrrrr" in case you wondered
  },
);

/**
 * When showing the page having "og:image" etc
 */

// Just generate the META Tags with the URL for the PNG Version of Avatar

참고문헌

작업을 시작한 시간이 거의 자정이었기 때문에 기억나지 않습니다. 그리고 제 경험을 공유하여 다른 사람들에게 도움이 되는 것이 이 게시물의 의도입니다.