简单三步做出微信h5表情包

腾讯NEXT学位

发布于 2018-07-05 11:53:15

2.5K0

发布于 2018-07-05 11:53:15

文章被收录于专栏：腾讯NEXT学位腾讯NEXT学位

在聊天中，表情占据了越来越重要的地位。它能够承载一些难以言说的情感，也让聊天显得更加生动活泼。

项目实现：

选取mp4文件或摄像头录制生成微信GIF表情，可添加文字和特效（制作中）等功能。

流程图：

使用的工具：

GIF编码：

https://jnordberg.github.io/gif.js/

只使用核心：GIFEncoder.js

Worker线程:

详见推送《JavaScript Worker 另类玩法》

线程编码每个Frame，然后合并成GIF

文件选取、录像：

兼容IOS，安卓平台

var input_file = document.createElement("input");
    input_file.type = "file";
    input_file.multiple = false; //单选文件
    input_file.accept = "video/*";
    input_file.style.display = "none";    document.body.appendChild(input_file);
.....
input_file.onclick();//选择文件

数据采集：

选取文件：android和ios平台选取文件基本上一致。

录像兼容性：在video标签播放能正常识别正确的rotatio。

在Canvas上，录像不管是横竖屏取得的视频文件roation已经旋转了90度，draw到canvas后

解决方案:

MediaInfo: https://github.com/buzz/mediainfo.js

只能读取视频的mediainfo信息,判断正确的roation

文件大小：7.1M，缺点js文件过大。

判断像素

判断右下角最后的像素是否有值和透明，如果无值和透明，证明视频rotation 90

let checkVideo= video=>{        var temp = tempCanvas        var scale = 320/video.videoHeight
        temp.width = scale *video.videoWidth;
        temp.height = scale * video.videoHeight;        var ctx = tempCanvas.getContext('2d');
        ctx.clearRect(0,0,temp.width,temp.height);
        ctx.drawImage(video,0,0,tempCanvas.width,tempCanvas.height);        var imgData=ctx.getImageData(0,0,tempCanvas.width,tempCanvas.height);        var len = imgData.data.length        if (imgData.data[len-4] ==0&&
            imgData.data[len-3] ==0 &&
            imgData.data[len-2]== 0 &&
            imgData.data[len-1] == 0)
      { 
        return true
      }else {        return false;
        }
  
}

mp4文件解析版：只支持mp4 mov 格式

旋转视频：

let drawRotatedImage = (ctx,image, x, y, angle,scaleX,scaleY)=> { 
    ctx.save();     
    ctx.scale(scaleX,scaleY);       
    ctx.translate(x, y);
    ctx.rotate(angle );
    ctx.drawImage(image, -(image.width/2), -(image.height/2));
    ctx.restore(); 
}

Encoder：

采集长度：4秒

采集间隔：150毫秒

尺寸大小：采集高宽适应在300*300

GIF编码参数：默认