canvas拼图功能实现代码示例


Posted in HTML / CSS onNovember 21, 2018

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

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

HTML / CSS 相关文章推荐
css3动画效果小结(推荐)
Jul 25 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 #HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 #HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 #HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 #HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 #HTML / CSS
You might like
德生PL330的评价与改造
2021/03/02 无线电
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Python request中文乱码问题解决方案
2020/09/17 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
手术室护士长竞聘书
2014/03/31 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
五年级学生评语大全
2014/12/26 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL