最近在做项目的时候遇到了照片拼贴的功能，所以在这里分享一下我封装的canvas拼贴功能。可能代码没写好。大家有什么问题或者有更好的办法可以私聊我，或者评论指出谢谢大家，实现的思路其实挺简单的，主要是通过服务器获取图片link，图片宽度，图片高度，然后用简单的递归来实现（注意移动端需要使用2倍的比例，否则会出现图片模糊的问题）/***canvas绘图数据*@param{Object[]}option.photoData*@param{string}option.photoData[].photo-照片的链接地址*@param{number}option.photoData[].width-照片的宽度*@param{number}option.photoData[].height-照片的高度*@param{Object[]}option.wordData*@param{string}option.wordData[].color-文本颜色*@param{number}option.wordData[].fontSize-文本大小*@param{string}option.wordData[].fontWeight-文本厚度*@param{number}option.wordData[].left-文本左边距*@param{number}option.wordData[].top-文本上边距*@param{string}option.wordData[].word-文本内容*@param{Object[]}选项。iconData*@param{string}option.iconData[].photo-图标的链接地址*@param{number}option.iconData[].left-图标的左边距*@param{number}option.iconData[].top-图标的上边距*@param{number}option.iconData[].width-图标的宽度*@param{number}option.iconData[].height-图标的高度**/functioncanvasDraw(选项){varcanvas=document.createElement('canvas'),ctx=canvas.getContext('2d'),clientWidth=document.documentElement.clientWidth,canvasHeight=0,distance=0,photoCount=0,iconCount=0;//在canvas中，手机端双画会模糊，需要双画，PC端则不需要。clientWidth=clientWidth>480？480*2：客户端宽度*2；option.photoData.forEach(function(item,index,picArr){如果(!index){item.distance=0;}elseif(index){distance+=Math.floor(clientWidth/option.photoData[index-1].width*option.photoData[index-1].height)item.distance=distance;}canvasHeight+=Math.floor(clientWidth/item.width*item.height);item.imgHeight=Math.floor(clientWidth/item.width*item.height);})console.log(option.photoData)if(ctx){canvas.width=clientWidth;canvas.height=canvasHeight+clientWidth/4*2ctx.fillStyle='#fff'ctx.fillRect(0,0,canvas.width,canvas.height)//绘制图片文字if(option.wordData.length){option.wordData.forEach(function(item,index){ctx.fillStyle=item.color;ctx.font='normalnormal'+item.fontWeight+''+calculate(item.fontSize)+'px微软雅黑';ctx.textAlign='left';ctx.fillText(item.word,calculate(item.left),canvasHeight+calculate(item.top));})}//按比例计算不同手机的百分比间距functioncalculate(num){返回Math.floor(clientWidth*num/750)}drawPhoto('photo0')函数drawPhoto(photoDom){varphotoDom=newImage();photoDom.setAttribute('crossOrigin','Anonymous');photoDom.src=option.photoData[photoCount].photo;photoDom.onload=function(){ctx.drawImage(photoDom,0,option.photoData[photoCount].distance,clientWidth,option.photoData[photoCount].imgHeight);照片数++；如果(photoCount==option.photoData.length){drawIcon('icon0')functiondrawIcon(iconDom){variconDom=newImage();iconDom.setAttribute('crossOrigin','Anonymous');iconDom.src=option.iconData[iconCount].icon;iconDom.onload=function(){ctx.drawImage(iconDom,计算(option.iconData[iconCount].left),canvasHeight+计算(option.iconData[iconCount].top),计算(option.iconData[iconCount].width),计算(option.iconData[iconCount].height))iconCount++;if(iconCount==option.iconData.length){varimageURL=canvas.toDataURL("image/jpeg")document.getElementsByClassName('shareImg')[0].setAttribute('src',imageURL)//将封包引用清除，释放内存；drawPhoto=null;}else{drawIcon('icon'+iconCount)}}}}else{drawPhoto('photo'+photoCount)}}}}else{console.log('不支持画布')}}
