概述
使用对象方式生成一个canvas画布并生成图片,可在移动端实现长按分享海报 对象中可以设置海报的文字及样式,图片大小、位置和遮罩形状
安装
npm install canvas2gif
使用
HTML
JS
var canvas2gif = canvas: "#canvas" // width: "100%", // height: "100%", { // 如果传入成功回调,则不会自动生成img图片,而是将canvas作为success回调会返回,方便后期做处理 console // 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" } { // 如果传入GIF生成成功的回调,则不会自动生成gif图片,而是将图片base64作为success回调会返回c,方便后期做处理 console } 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"
属性
Canvas2gifisFinish
可获取画布是否渲染完毕
方法
Canvas2gif
使用该方法可生成gif动图,第一个参数是动图的帧数,第二个参数是gif的宽度(不建议超过7.5rem)宽度越大生成时间越长,过大会导致生成失败,建议3-7.5rem
Canvas2gif
该方法可传入一个视频对象,用于不支持自动播放的游览器(如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代码