canvas拼图功能实现代码示例

最近做项目的时候遇到照片拼图的功能，便在这里分享自己的封装的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')        }
    }
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！