GIF 사용자 업로드 가동 복수의 영상 프레임으로 분해하고, 새로운 합성 화상을 생성 GIF

배경

왜 이러한 도구를 만들

  • 첫째, 최근 표현 제품의 패키지를 만들어, 당신은 텍스트 GIF 사진을 생성 할 필요가, 당신은 텍스트의 위치를 ​​제어 할 수 있으며, 다른 텍스트는 다른 그림에 표시
  • 웹 클라이언트 도구로 만들어 언제 어디서나 쉽게 사용하기

탐색

  • 먼저 당신이 GIF 사진 프레임에 필요 찾고 라이브러리에 의해이 문제를 발견 하는 BuzzFeed / libgif-JS
  • 텍스트를 생성하려면이 라이브러리의 그림으로 자유롭게에 편집하고 볼 수 있습니다 fabric.js을
  • 미리보기 또는 GIF 이미지의 새로운 세대를 다운로드하려면,이 라이브러리를 사용하는 야후 / gifshot을

분석

주요 아이디어는 달성하는 것입니다

  • 저장소를 통해 가동 무화과의 GIF GIF는 인스턴스 GIF로 해결
  • 지프 인스턴스 캔버스가 각 프레임 취득 가로 지르 base을 최대 서브 파일 객체 저장소로 변환
  • 직물 base을 통해 디스플레이 인터페이스로 변환하고 함수의 기입 동작을 실현

코드 저장소

GitHub의 주소 자세한 사용법 및주의 사항은 README를 참조하십시오

경험 주소

  • 사진 주소 HTTPS 형식을 입력하십시오
  • 분해 이미지 후, 주위의 모든 사진을 보려면 스크롤 막대를 드래그
  • 분해 GIF 이미지 링크 기능, 도메인 간 기능을 지원하지 않는 문제를 해결하지 못 사진을 찾을 수 있지만,이 솔루션은 사진을 발견로드 할 경우, F12는 사진 대부분 크로스 도메인 오류에서 디버깅 단계 모양을 입력 솔루션은 외부 사진을 다운로드하는 것입니다 다음 업로드 기능 입력을 사용
  • 내가 호환성 문제를 고려하지 않고 개발 된 구글 브라우저에서 완전히 오전, 구글 테스트를 방문하시기 바랍니다
  • 코드 체험 GitHub의 페이지에 배치하기 때문에, 그래서 오픈 빠르게 열고, 자신의 VPN에 대한 문제를 해결하기 위해 일부 Caton을 느낄
  • 사진의 사진 프레임 및 300 픽셀의 고정 폭, 게시 동적 크기를 추가 할 수 있습니다 생성
  • 당신이 발생하는 등 저작권 분쟁 등 저작권 문제로 사용하도록주의하십시오, 다운로드 할 이미지를 생성 할 수 있습니다, 생성 후 사진을 클릭하면, 라이브러리는 책임을지지 않습니다
  • 당신은 다른 질문이 있으시면, 아래의 메세지를 남겨주세요

쓰기는 도움이있는 경우, 이동하시기 바랍니다 쉽지 않다 GitHub의 주소를 감사 star✨✨ 별에

추천

출처www.cnblogs.com/chengfeng6/p/11493905.html