消防器材厂家东莞网站建设,盐城seo推广,佛山高明,网站开发网页ui设计公司具体思路
先设置画布的宽高#xff0c;再将每个图片整理成一个对象的数组通过某个方法传出合成后的base64 #xff08;1#xff09;、创建一个画布的类#xff0c;他的属性是canvas虚拟dom和ctx
#xff08;2#xff09;、构造器初始化convas对象、ctx、convas的宽高
…具体思路
先设置画布的宽高再将每个图片整理成一个对象的数组通过某个方法传出合成后的base64 1、创建一个画布的类他的属性是canvas虚拟dom和ctx
2、构造器初始化convas对象、ctx、convas的宽高
3、这个类应该有将配置的对象数组合成图片的方法和导出画布base64的方法
图片数组与画布格式
/画布的大小{bgWidth:画布的宽,bgHeight:画布的高} //图片的配置[{src:图片的base64,x:放入画布的x坐标,y:放入画布的y坐标,height:设置传入图片的高度,width:设置传入图片的宽度}]
创建实现功能的类
//将base64转成虚拟dom的功能function getImage(url){const imagenew window.Image()if(/^http/.test(url)){image.setAttribute(crossOrigin,anonymous)}image.srcurlreturn new Promise((resolve,reject){image.onloadfunction (){return resolve(image)}image.errorfunction (){return resolve(null)}})}class compoundImgs{canvas:anyctx:anyconstructor({bgWidth:number,bgHeight:number}){this.canvasdocument.createElement(canvas)this.canvas.widthbgWidththis.canvas.heightbgHeightthis.ctxthis.canvas.git Context(2d)}async run(imgConfigs){//获取Dom节点promise对象形成的数组const imgDomsPimgConfigs.map(async ({src}){const imgDom await getImage(src)return imgDom})//dom节点数组const imgElesawait Promise.all(imgDomsP)//遍历画图imgEles.map((ele,i){const {x0,y0,width0,height0}imgConfigs[i]if(ele){this.ctx.drawImage(ele,x,y,width,height)}})}//打印画布base64print(){return this.canvas.toDataURL()}}export default compoundImgs
使用方法
const mycanvasnew compoundImgs({ bgWidth:1080,bgHeight:1920})mycanvas.run([{src:图片A的base64x:A的x坐标,y:A的y坐标,height:A的高widthA的宽},{src:图片B的base64x:B的x坐标,y:B的y坐标,height:B的高widthB的宽}]).then((){console.log(mycanvas.print()})
