相关了解:
- jCanvas
- 防止注入
- MediaRecord 动画
- 日志收集
废话不多说先贴成品
抖音上有很多类似下图的情况,所以就突发奇想,想做一个简单的工具,目前还是初版,功能很简单;方便教学场景的使用工具,
目前只支持 绘制矩形、圆形、直线、文字,支持动画过渡
体验地址: https://ibeeger.com/math/
体验地址中案例写的比较简单,凑合看了~~~~
使用文档说明
- 绘制矩形:rect(x,y, width,height)
- 绘制圆形:circle(r, x, y)
- 绘制直线:line({x: x, y: y}, {x: x, y: y}, color) 开始坐标,结束坐标 color = ‘#xxxxxx’
- 延迟动效: delay(s) //s 单位秒
- 过渡动效:to({proto}, s) // 参数1属性变更如 {x: 10} , 参数s 单位秒
jCanvas文档:https://projects.calebevans.me/jcanvas/docs/
前端注意:
由于做的比较简陋,用到了eval,会有一些js方法的隐患,知识做了简单的过滤,希望各位大佬发现问题多多指点
replace(/\$|XMLHttpRequest|http|ajax|fetch/g, '').trim()
录制动画:前面已经说过了 MediaRecord 录制canvas
let recorder = new MediaRecorder(stream, {
mimeType: 'video/webm;codecs=vp8'
})
recorder.start(0);
recorder.addEventListener('dataavailable', function(e) {
if (e.data.size > 0) {
chunks.push(e.data);
}
if (recorder.state == 'inactive') {
const blob = new Blob(chunks, {
type: 'video/webm;codecs=vp8'
});
var reader = new FileReader();
reader.onload = function() {
// console.log(reader.result); // base64格式
}
// reader.readAsText(blob, 'utf-8')
reader.readAsDataURL(blob, 'utf-8')
// reader.readAsBinaryString(blob, 'utf-8')
// reader.readAsArrayBuffer(blob, 'utf-8')
createWebM(URL.createObjectURL(blob));
}
}, false);
下载录制动画:
绘制完成之后需要点击运行之后,才能生成动画,点击下载等待动画生成完成(大概3~5秒)之后就可以到本地,webm格式。
如果只是绘制静态的图形,可以直接下载图片。
当然也可以扣扣、WX截图~~~
日志收集:
let bs = window.btoa(encodeURIComponent(jsstr));
let img = document.createElement('img');
img.src = 'xxxxx.com/log?c='+bs;
收集到转换的公式
最后欢迎各位老师多多提意见、建议