집 > 기사 > 웹 프론트엔드 > 캔버스와 gif.js를 사용하여 나만의 디지털 비 아바타 만들기

캔버스와 gif.js를 사용하여 나만의 디지털 비 아바타 만들기

小云云원래의: 2018-01-02 13:44:462445검색

이 기사에서는 canvas+gif.js를 사용하여 자신만의 디지털 비 아바타를 만들기 위한 샘플 코드를 주로 소개합니다. 여기에는 세부 코드가 정리되어 있어 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

사용방법

1. 마음에 드는 아바타를 업로드하면 결국 정사각형이 됩니다

2. 생성 후 캐릭터 색상이 너무 이상한지 확인하고 캐릭터 색상을 변경할 수 있습니다

3. 만족스러우면 마우스 오른쪽 버튼을 클릭하고

gif.js

로 저장하세요. 오늘의 주인공은 gif.js를 사용하여 브라우저에서 gif를 애니메이션화하는 라이브러리입니다. 내가 생각하는 함정을 소개합니다. 디지털 비 그리기에 관해서는 정원에 관련 글이 있으니 얕보지는 않겠습니다.

gif.js는 캔버스 애니메이션을 기반으로 gif를 쉽게 얻을 수 있습니다.

//代码来自官网

var gif = new GIF({
 workers: 2,//启用两个worker。
 quality: 10//图像质量
});//创建一个GIF实例

// 核心方法，向gif中加一帧图像，参数可以是img/canvas元素，还可以从ctx中复制一帧
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});//一帧时长是200

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on(&#39;finished&#39;, function(blob) {//最后生成一个blob对象
 window.open(URL.createObjectURL(blob));
});

gif.render();//开始启动

전반적으로 이 라이브러리의 API는 매우 간단하고 친숙합니다. 예전에 jsGif를 봤는데 헷갈렸는데 나중에 너무 좋은 걸 발견했어요. gif 이미지 생성은 CPU를 많이 사용하는 작업이므로, 특히 이미지가 큰 경우 라이브러리는 webworker에서 렌더링을 허용합니다. 그러나 문서에는 여전히 주의해야 할 몇 가지 사항이 있습니다(실제로 저는 함정을 밟았습니다):

1.git.addFrame은 프레임을 추가하는 것입니다. 움직이는 gif를 생성하려면 루프가 필요합니다.

for(...){
gif.render(...)
}

2 생성자 GIF 옵션 중 WorkerScript 옵션이 필수이므로 아래와 같이 워커에서 이미지를 렌더링할 수 있습니다.

var gif = new GIF({
workers: 2,
quality: 10,
  workerScript:&#39;./gif.worker.js&#39;
});

알았나요? 서둘러서 사용해 보세요.

캔버스와 gif.js를 사용하여 나만의 디지털 비 아바타 만들기

관련 기사