首页 > 作文

canvas拼图功能实现代码示例

更新时间:2023-04-06 09:47:47 阅读: 评论:0

最近做项目的时候遇到照片拼图的功能,便在这里分享自己的封装的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 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图