最近做项目的时候遇到照片拼图的功能,便在这里分享自己的封装的canvas拼图功能,可能代码写的不好,如果有疑问或者是有更好的方法的,可以私聊我,或者是评论指出,感谢各位
实现的思路其实挺简单的,主要是通过服务端获取图片链接,图片宽度,图片高度,然后利用简单的递归实现就行了(注意移动端需要采用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[]} option.icondata * @param {string} option.icondata[].photo - icon的链接地址 * @param {number} option.icondata[].left - icon的左边距 * @param {number} option.icondata[].top - ic学英语有什么用on的上边距 * @param {number} option.icondata[].width - icon的宽度 * @param {number} option.icondata[].height - icon的高度 * */function canvasdraw(option){ var canvas = 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 奉爱瑜伽: clientwidth * 2; option.photodata.foreach(function(item,index,picarr){ if (!index) { item.distance = 0; }el if(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 * 2 ctx.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 = 'normal normal ' + item.fontweight + ' ' + calculate(item.fontsize) + 'px microsoft yahei'; ctx.textalign = 'left'; ctx.filltext(item.word, c鹅蛋脸适合什么短发alculate(item.left), canvasheight + calculate(item.top)); }) } //按比例计算不同手机的百分比间距 function calculate(num){ return math.floor(clientwidth * num / 750) } drawphoto('photo0') function drawphoto(photodom){ var photodom = new image(); photodom.tattribute('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++; if (photocount == option.photodata.length) { drawicon('icon0') function drawicon(icondom){ var icondom = new image(); icondom.tattribute('crossorigin', 'anonymous'); icondom.src = option.icondata[iconcount].icon; icondom.onload = function(){ ctx.drawimage(icondom, calculate(option.icondata[iconcount].left), canvasheight + calculate(option.icondata[iconcount].top), calculate(option.icondata[iconcount].width), calculate(option.icondata[iconcount].height)) iconcount++; if (iconcount == option.icondata.length) { lol生日礼物 var imageurl = canvas.todataurl("image/jpeg") document.getelementsbyclassname('shareimg')[0].tattribute('src', imageurl) //将闭包引用清除,释放内存; drawphoto = null; }el{ drawicon('icon' + iconcount) } } } }el{ drawphoto('photo'+ photocount) } } } }el{ console.log('不支持canvas') } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。
本文发布于:2023-04-06 09:47:45,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/1a30c8b83752741236d59e448cfa7ef5.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:canvas拼图功能实现代码示例.doc
本文 PDF 下载地址:canvas拼图功能实现代码示例.pdf
留言与评论(共有 0 条评论) |