最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

   
 
 
 

    
  
  
  
 
    
  
  
  
   
    
  
  
  
    文字:  
    
  
  
  
     onChange('text', e)} /> 
    
  
  
  
  

 
 
 
 

  
  
  
  
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 ( 
  
  
  
  
     
  
  
  
  
       
  
  
  
  
        {text}

至于樣式問題, 筆者在github里有詳細的介紹, 這里就不詳細說明了. 所以說我們在項目中實現(xiàn)預(yù)覽也很簡單, 直接引入組件即可:

 
 
 
 

  
  
  
  
 { blinkRef.current = ref.current}} /> 
 
 
 
 

value就是form表單的配置產(chǎn)物.

1.3 實現(xiàn)預(yù)覽gif動圖

實現(xiàn)預(yù)覽gif動圖是文章的重點, 我們要考慮如何將dom轉(zhuǎn)化為圖片, 然后再將圖片轉(zhuǎn)化為gif. 這塊筆者思考了一會, 想出了一個解決方案, 思路如下: 先用canvas庫定時截取預(yù)覽區(qū)域的動畫效果, 生成n張關(guān)鍵幀圖片, 然后利用canvas將多張關(guān)鍵幀組裝成gif動圖. 筆者的思路主要采用的flash軟件的關(guān)鍵幀動畫的實現(xiàn), 具體流程如下:

圖中我們涉及到了幾個有意思的插件, 筆者在H5-Dooring項目中也用到過,分別為:

• dom-to-image —— 轉(zhuǎn)門將dom轉(zhuǎn)化為圖片的庫
• gif.js —— 將多張圖片轉(zhuǎn)化為gif動圖

實現(xiàn)過程中由于dom-to-image產(chǎn)生圖片的過程是異步的, 但是我們要將所以圖片生成完之后才能傳給gif.js, 這里筆者用了promise.all;來實現(xiàn)(注意, 考點). 我們先將第一步驟二次封裝成新的promise對象, 代碼如下:

 
 
 
 

  
  
  
  
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) 
  
  
  
  
    }) 
  
  
  
  
 } 
 
 
 
 

其次我們使用promise.all來將圖片統(tǒng)一收集傳給gif.js對象:

 
 
 
 

  
  
  
  
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 ... 
  
  
  
  
        }); 
  
  
  
  
      } 
  
  
  
  
    }) 
  
  
  
  
  } 
 
 
 
 

關(guān)于gif.js的使用方法, 官網(wǎng)里也有詳細的介紹, 這里筆者不一一舉例了, 感興趣的朋友可以研究一下.

1.4 一鍵下載gif動圖

實現(xiàn)現(xiàn)在gif文件我們采用file-saver模塊來實現(xiàn), 實現(xiàn)思路也很簡單, 如下:

 
 
 
 

  
  
  
  
saveAs(image, `${uuid(6, 10)}.gif`); 
 
 
 
 

image即是gif.js或者其他動圖插件生成的gif圖片, uuid主要是給圖片命名. 我們可以看看幾個下載好的gif例子:

最后

在H5編輯器H5-Dooring中，后期也會實現(xiàn)類似的功能，大家感興趣的可以了解一下。

github：H5編輯器H5-Dooring

github：Blink

本文轉(zhuǎn)載自微信公眾號「趣談前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系趣談前端公眾號。

本文名稱：手把手教你擼一個能生成抖音風(fēng)格動圖的gif制作平臺
文章位置：http://m.fisionsoft.com.cn/article/copocie.html