欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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')
        }
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。