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实现的阴影效果
Dec 24 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
python开发之thread线程基础实例入门
2015/11/11 Python
python实现下载文件的三种方法
2017/02/09 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
python归并排序算法过程实例讲解
2020/11/04 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
Python里面如何实现tuple和list的转换
2012/06/13 面试题
怎样自定义一个异常类
2016/09/27 面试题
国际贸易专业推荐信
2013/11/15 职场文书
影视制作岗位职责
2013/12/04 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
办护照工作证明范本
2014/01/14 职场文书
学生自我评价范文
2014/02/02 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
女儿满月酒致辞
2015/07/29 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书