canvas拼图功能实现代码示例
程序员文章站
2022-05-26 16:25:49
随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-11-21...
最近做项目的时候遇到照片拼图的功能,便在这里分享自己的封装的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 - icon的上边距 * @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; }else 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, calculate(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.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++; if (photocount == option.photodata.length) { drawicon('icon0') function drawicon(icondom){ var icondom = new image(); icondom.setattribute('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) { var imageurl = canvas.todataurl("image/jpeg") document.getelementsbyclassname('shareimg')[0].setattribute('src', imageurl) //将闭包引用清除,释放内存; drawphoto = null; }else{ drawicon('icon' + iconcount) } } } }else{ drawphoto('photo'+ photocount) } } } }else{ console.log('不支持canvas') } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。