canvas2gif
v1.0.1
Published
canvas序列帧或视频生成gif图片
Downloads
3
Readme
概述
使用对象方式生成一个canvas画布并生成图片,可在移动端实现长按分享海报 对象中可以设置海报的文字及样式,图片大小、位置和遮罩形状
安装
npm install canvas2gif
使用
HTML
<canvas id="canvas"></canvas>
JS
import canvas2gif from 'Canvas2gif '
var canvas2gif = new Canvas2gif({
canvas: "#canvas",
// width: "100%",
// height: "100%",
success:function (canvas) { // 如果传入成功回调,则不会自动生成img图片,而是将canvas作为success回调会返回,方便后期做处理
console.log(canvas)
// const image: HTMLImageElement = new Image()
// image.src = canvas.toDataURL('image/png', 1)
// image.style.position = "absolute"
// image.style.top = "0px"
// image.style.left = "0px"
// image.style.width = "100%"
// image.style.height = "100%"
// document.body.appendChild(image)
// canvas.style.display = "none"
},
createdGif:function(base64){ // 如果传入GIF生成成功的回调,则不会自动生成gif图片,而是将图片base64作为success回调会返回c,方便后期做处理
console.log(base64)
},
content: [ // 画布内容,数组下标越大层级越高
{
type: "image", //图片类型
url: "/bg9.jpg", //图片地址(支持跨域)
top: "50vh", //相对于canvas顶部的距离
left: "0", //相对于canvas左边的距离
width: "7.5rem", //图片宽度
height: "16.20rem", //图片高度
marginTop: "-8.1rem", //图片相对于canvas的上外边距
},
{
type: "image",
url: "http://thirdwx.qlogo.cn/mmopen/vi_32/o8z8JIpTZT4vmkfm6Olfq2VwAE2ibH7YU4G3P8iaPI26u9HQlFDwux7LSpHQ4yBRAB6JLt0VIZG07YScyYvkWGxA/132",
top: "50vh",
left: "50vw",
width: "1.29rem",
height: "1.29rem",
marginLeft: "-2.77rem", //图片相对于canvas的左外边距
marginTop: "4.25rem",
mask: {
type: "circle" //圆形遮罩方式(circle | polygon)
}
},
{
type: "text", //文本类型
text: "全服排名99", //文本内容
fontSize: "1.13rem", //字体大小
width:"7.5rem", //文本最大宽度
fontWeight: "bold", //文本加粗
color: "#f00", //文本颜色
align: "center", //文本对齐方式
top: "50vh",
left: "0rem",
marginTop:"-5.4rem"
},
{
type: "image",
url: "/qrcode.png",
top: "50vh",
left: "50vw",
width: "1.29rem",
height: "1.29rem",
marginLeft: "1.77rem",
marginTop: "4.25rem",
mask:{
type:"polygon", // 多边形遮罩
point:[["0rem","0rem"],["1.29rem","0rem"],["0rem","1.29rem"]] //用一个二位数组表示遮罩的坐标点(先对于图片左上位置),需要至少三个点来绘制一个遮罩
}
},
{
type:"gif", //在画布内绘制一组循环播放的序列帧
url:"/static/{i}.png", // 序列帧图片路径,其中{i}表示序列帧的编号,必须从0开始顺排
top:"20vw",
left:"62vh",
width:"3rem",
height:"6.64rem",
num:10 //序列帧的总数
},
{
type:"video", // 视频类型
url:"/static/video.mp4", //视频地址
autoPlay:true, //视频是否自动播放
top:"5vw",
left:"1vh",
width:"7.5rem",
height:"3.2rem"
}
]
})
属性
Canvas2gif.isFinish
可获取画布是否渲染完毕
方法
Canvas2gif.creatGif(15,"5rem")
使用该方法可生成gif动图,第一个参数是动图的帧数,第二个参数是gif的宽度(不建议超过7.5rem)宽度越大生成时间越长,过大会导致生成失败,建议3-7.5rem
Canvas2gif.addVideo({
type: "video",
url: "/static/video.mp4",
top: "30vh",
left: "0rem",
width: "7.5rem",
height: "3.2rem"
})
该方法可传入一个视频对象,用于不支持自动播放的游览器(如ios),需要使用按钮触发该事件来播放
关于居中
由于需要生成移动端的海报,所以一般都是整平的,这时就需要设置居中 背景居中可以使用这个公式
{
type: "image",
url: "//game.gtimg.cn/images/ulink/act/3195/a20200629my/bg9.jpg",
top:"50vh", //top设置50vh 即高度的50%
left:"0", //left设置0或0rem
width: "7.5rem", //宽度设置7.5rem或100vw即100%的宽
height: "16.20rem", //高度设置和图片大小一直的高度即可
marginTop: "-8.1rem", //上边距设置高度一半的相反数
}
元素居中与背景类似,top
设置50vh
,marginTop
设置正值则是元素从垂直中点的位置向下的位移,负值相反
水平居中同理left
设置50vw
即50%的宽度,marginLeft
设置正值则是元素从水平中点的位置向右的位移,负值相反
注意
动图不受层级影响,始终最高层级
更新
- 2020-9-1 text类型增加多行文本支持,行高属性(lineHeight)
- 2020-9-7 单位支持百分比
bug反馈
点击这里反馈bug,或push代码