手把手教你撸一个能生成抖音风格动图的gif制作平台

<div className={styles.editorArea}>
  <div className={styles.formItem}>
    <span className={styles.label}>文字: </span>
    <Input value={value['text']} placeholder="请输入文本内容" onChange={(e) => onChange('text', e)} />
  </div>
  <div className={styles.formItem}>
    <span className={styles.label}>大小: </span>
    <InputNumber value={value['fontSize']} placeholder="请输入文本大小" onChange={(e) => onChange('fontSize', e)} />
  </div>
  <div className={styles.formItem}>
    <span className={styles.label}>文字颜色: </span>
    <Color value={value['textColor'][0]} onChange={(e) => onChange('textColor', e, 1)} />
    <Color value={value['textColor'][1]} onChange={(e) => onChange('textColor', e, 2)} />
  </div>
  <div className={styles.formItem}>
    <span className={styles.label}>背景色: </span>
    <Color value={value['themeColor']} onChange={(e) => onChange('themeColor', e)} />
  </div>
  <div className={styles.formItem}>
    <span className={styles.label}></span>
    <Button type="primary" onClick={generateGif}>导出Gif</Button>
    {/* <Button style={{marginLeft: '20px'}} onClick={reset}>重置</Button> */}
  </div>
</div>
复制代码

import React, { useRef, useEffect } from 'react'
import './index.less'

export default function Blink(props) {
  const { 
    text = '趣谈前端',
    fontSize = '48px',
    themeColor = '#000',
    textColor = ['#74fcfd', '#ea3448'],
    onRef
  } = props

  const ref = useRef(null)

  useEffect(() => {
    onRef && onRef(ref)
  }, [])

  return (
    <div className='blink' style={{backgroundColor: themeColor}} ref={ref}>
      <div className="blink-item" data-text={text} style={{fontSize: fontSize}}>
        <div className="text text-front" style={{color: textColor[0]}}>{text}</div>
        <div className="text text-back" style={{color: textColor[1]}}>{text}</div>
      </div>
    </div> 
  )
}
复制代码

<Blink {...value} onRef={(ref) => { blinkRef.current = ref.current}} />
复制代码

const generateImg = (node, imgId, time) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        domtoimage.toPng(node)
        .then(function (dataUrl) {
          let img = new Image();
          img.src = dataUrl;
          img.id = imgId;
          img.className = 'imgPiece';
          document.getElementById('imgBox').appendChild(img);
          resolve(document.getElementById(imgId));
        })
        .catch(function (error) {
          reject(error);
        });
      }, time)
    })
 }
复制代码

const generateGif = () => {
    document.getElementById('imgBox').innerHTML = '';
    let blink = blinkRef.current;
    let promiseArr = [];

    for(let i=0, len=24; i < len; i++) {
      promiseArr.push(generateImg(blink, `img${i+1}`, 16 * i));
    }

    Promise.all(promiseArr).then(res => {
      if(res) {
        let w = res[0].width;
        let h = res[0].height;
         // res即为所有的img集合, 可以直接传给gif.js ...
        });
      }
    })
  }
复制代码

saveAs(image, `${uuid(6, 10)}.gif`);
复制代码