当前位置: 开发笔记 > 前端 > 正文

怎样用canvas实现自定义头像功能

作者：yangyang19890811 | 来源：互联网 | 2022-04-14 01:10

这次给大家带来怎样用canvas实现自定义头像功能，用canvas实现自定义头像功能的注意事项有哪些，下面就是实战案例，一起来看一下。

写在最前：

前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的，没有安装过的还得手动去“允许”falsh的运行。所以让我用canvas实现一个一样的功能，嘿嘿，刚好最近也在研究canvas，所以欣然答应（其实，你没研究过难道就不答应么，哈哈哈哈哈~）

成果展示：

Git地址:https://github.com/ry928330/portraitDIY

功能说明：

拖拽左侧小方框，或者是鼠标放在小方框右下角，点击拉伸方框，方框覆盖部分的图片被自动截取下来，然后再在右侧的多个容器里面重绘。
输入宽高，自定义你需要订制的头像大小，目前只支持宽高相同的头像图片。

实现细节：

因为你要对图片所在的区域进行截图，所以你得制作一张canvas，盖在图片所在的区域。这里，我们给出了一个函数，根据传入的DOM里面元素的类名创建相同位置的canvas，盖在原来的DOM元素上面：

function createCanvasByClassName(tag) {
    var canvasInitialWidth = $(&＃39;.&＃39; + tag).width();
    var canvasInitialHeight = $(&＃39;.&＃39; + tag).height();
    var left = $(&＃39;.&＃39; + tag).offset().left - $(&＃39;.&＃39; + tag).parent(&＃39;.portraitContainer&＃39;).offset().left + 1;
    var top = $(&＃39;.&＃39; + tag).offset().top - $(&＃39;.&＃39; + tag).parent(&＃39;.portraitContainer&＃39;).offset().top + 1;
    //var left = $(&＃39;.&＃39; + tag).offset().left + 1;
    //var top = $(&＃39;.&＃39; + tag).offset().top + 1;
    clearCanvasObj.left = $(&＃39;.&＃39; + tag).offset().left + 1;
    clearCanvasObj.top = $(&＃39;.&＃39; + tag).offset().top + 1;
    // clearCanvasObj.left = left;
    // clearCanvasObj.top = top;
    var canvasElement = $(&＃39;&＃39;);
    var randomNum = Math.floor(getRandom(0, 10000));
    clearCanvasObj.canvasId = randomNum;
    canvasElement.attr({
        id: &＃39;canvas&＃39;,
        width: canvasInitialWidth,
        height: canvasInitialHeight
    });
    canvasElement.css({
        position: &＃39;absolute&＃39;,
        top: top, 
        left: left
    });
    //$(&＃39;body&＃39;).append(canvasElement);
    var appendEle = $(&＃39;.portraitContainer&＃39;).append(canvasElement);
    var canvas = document.getElementById(&＃39;canvas&＃39;);
    var ctx = canvas.getContext(&＃39;2d&＃39;);
    //ctx.fillStyle = "rgba(211,211,216,0.5)";
    ctx.clearRect(0, 0, canvasInitialWidth, canvasInitialHeight);
    ctx.fillStyle = "rgba(0,0,0, 0.4)";
    ctx.fillRect(0, 0, canvasInitialWidth, canvasInitialHeight);
    return canvas;
}

有了这张canvas你就可以在你图片所在区域肆意的操作了。首先，降整个区域画上一个浅黑色的阴影，然后再擦除初始小方框区域里面的颜色。然后给整个页面添加mousedown，mousemove，mouseup事件，他们所做的功能就跟你在页面中实现一个拖拽的功能类似，这里重点说下mousemove里面做的操作，代码如下：

function mousemoveFunc(event) {
    /* Act on the event */
    var nowMouseX = event.clientX - clearCanvasObj.left;
    var nowMouseY = event.clientY - clearCanvasObj.top;
    if (nowMouseX >= clearCanvasObj.xStart && nowMouseX <= clearCanvasObj.xStart + clearCanvasObj.width && nowMouseY >= clearCanvasObj.yStart && nowMouseY <= clearCanvasObj.yStart + clearCanvasObj.height) {
        clearCanvasObj.isCanvasArea = true;
        //clearCanvasObj.isRightCorner = false;
        imgContainerCanvas.style.cursor = &＃39;move&＃39;;
    } else if ((nowMouseX >= clearCanvasObj.xStart + clearCanvasObj.width - 10) && (nowMouseX <= clearCanvasObj.xStart+ clearCanvasObj.width + 10) 
        && (nowMouseY >= clearCanvasObj.yStart + clearCanvasObj.height - 10) && (nowMouseY <= clearCanvasObj.yStart + clearCanvasObj.height + 10)) {
        clearCanvasObj.isCanvasArea = true;
        //clearCanvasObj.beginDraw = false;
        imgContainerCanvas.style.cursor = &＃39;se-resize&＃39;;
    } 
    else {
        clearCanvasObj.isCanvasArea = false;
        //clearCanvasObj.isRightCorner = false;
        imgContainerCanvas.style.cursor = &＃39;default&＃39;;
    }
    var outerDomWidth = $(".imgContainer").width();
    var outerDomHeight = $(".imgContainer").height();
    var xDistance = event.clientX - clearCanvasObj.mouseX;
    var yDistance = event.clientY - clearCanvasObj.mouseY;
    //var outerCTX = canvas.getContext(&＃39;2d&＃39;);
    //移动小方框
    if (clearCanvasObj.beginDraw && clearCanvasObj.isCanvasArea && !clearCanvasObj.isRightCorner) {
        ry_CTX.fillStyle = clearCanvasObj.color;
        // console.log(&＃39;1&＃39;, clearCanvasObj.xStart, clearCanvasObj.yStart)
        ry_CTX.fillRect(clearCanvasObj.xStart, clearCanvasObj.yStart, clearCanvasObj.width, clearCanvasObj.height);
        //outerCTX.fillRect(0, 0, canvas.width, canvas.height);
        clearCanvasObj.xStart += xDistance;
        clearCanvasObj.yStart += yDistance;
        //判断方框是否达到边界
        if (clearCanvasObj.xStart <= 0) {
            clearCanvasObj.xStart = 0;
        }
        if (clearCanvasObj.yStart <= 0) {
            clearCanvasObj.yStart = 0;
        }
        if ((clearCanvasObj.xStart + clearCanvasObj.width) >= outerDomWidth) {
            clearCanvasObj.xStart = outerDomWidth - clearCanvasObj.width;
        }
        if ((clearCanvasObj.yStart + clearCanvasObj.height) >= outerDomHeight) {
            clearCanvasObj.yStart = outerDomHeight - clearCanvasObj.height;
        }
        // console.log(&＃39;2&＃39;, clearCanvasObj.xStart, clearCanvasObj.yStart)
        ry_CTX.clearRect(clearCanvasObj.xStart, clearCanvasObj.yStart, clearCanvasObj.width, clearCanvasObj.height);
        produceSmallPic(clearCanvasObj.xStart+clearCanvasObj.left, clearCanvasObj.yStart+clearCanvasObj.top, clearCanvasObj.width, clearCanvasObj.height, imageURL)
        clearCanvasObj.mouseX = event.clientX;
        clearCanvasObj.mouseY = event.clientY;
    }
    //拖拽小方框
    if (clearCanvasObj.isRightCorner) {
        ry_CTX.fillStyle = clearCanvasObj.color;
        ry_CTX.fillRect(clearCanvasObj.xStart, clearCanvasObj.yStart, clearCanvasObj.width, clearCanvasObj.height);
        var realDistance = Math.min(xDistance, yDistance)
        clearCanvasObj.width +=  realDistance;
        clearCanvasObj.height += realDistance;
        //拖动时边界条件的判断
        if (clearCanvasObj.xStart + clearCanvasObj.width >= outerDomWidth) {
            clearCanvasObj.width = outerDomWidth - clearCanvasObj.xStart;
            clearCanvasObj.height = outerDomWidth - clearCanvasObj.xStart;
        }
        if (clearCanvasObj.yStart + clearCanvasObj.height >= outerDomHeight) {
            clearCanvasObj.width = outerDomHeight - clearCanvasObj.yStart;
            clearCanvasObj.height = outerDomHeight - clearCanvasObj.yStart;
        }
        if (clearCanvasObj.width <= 10) {
            clearCanvasObj.width = 10;
        }
        if (clearCanvasObj.height <= 10) {
            clearCanvasObj.height = 10;
        }
        ry_CTX.clearRect(clearCanvasObj.xStart, clearCanvasObj.yStart, clearCanvasObj.width, clearCanvasObj.height);
        produceSmallPic(clearCanvasObj.xStart+clearCanvasObj.left, clearCanvasObj.yStart+clearCanvasObj.top, clearCanvasObj.width, clearCanvasObj.height, imageURL);
        clearCanvasObj.mouseX = event.clientX;
        clearCanvasObj.mouseY = event.clientY;
    }                            
}

函数里面，你需要注意拖拽的边界条件，一个是方框不能拖到图片所在DOM外的边界；另外一个就是当你鼠标放在小方框所在的区域改变鼠标的样式。方框在拖动的过程中，我们不断重绘方框移动的区域（也就是不断的画上阴影），然后在新的位置调用clearRect函数，重新擦出一个小方框出来。在拖拽或是拉伸的过程中，我们会不断调用produceSmallPic函数，在右边的容器（每个容器都是一个canvas）里面不断根据容器大小重绘出所需的头像。代码如下：

function produceSmallPic(imageURL,left, top, width, height) {
    var img = new Image();
    img.src = imageURL;
    var targetCtx = new Array();
    var targetCanvas = null;
    img.Onload= function() {
        portraitGroupsArr.forEach(function(item, index) {
            targetCanvas = document.getElementById(item.class);
            targetCtx.push(targetCanvas.getContext(&＃39;2d&＃39;));
            targetCtx[index].clearRect(0,0, item.width, item.height);
            targetCtx[index].drawImage(img, left - clearCanvasObj.left, top - clearCanvasObj.top, width, height, 0, 0 , item.width, item.height);
        })
    }
}

我们说下这个函数的作用，这里我们要注意一个参数imageURL，这个URL是由图片所在的DOM转化来的。因为你要把DOM所在的区域变成一张图片，这样你才能在利用drawImage函数截取你所需要的区域。所以我们先利用html2canvas库函数讲图片所在的DOM转化为canvas，这张canvas的内容是包含你所要截取的图片的，然后把这张canvas转化为图片取得图片地址imageURL，代码如下：

html2canvas(document.getElementById(&＃39;imgContainer&＃39;), {
        onrendered: function(canvas) {
            var imageURL = canvasTransToImage(canavs);
            ...
        }
})
function canvasTransToImage(canvas) {
    var imageURL = canvas.toDataURL(&＃39;image/png&＃39;);
    return imageURL;
}

接着，你就可以便利右侧的canvas容器，讲图片重回到里面了，整个过程就这样结束，回头看来是不是很简单。

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读

js
Python安全实践：Web安全与SQL注入防御

本文旨在介绍Web安全的基础知识，特别是如何使用Python和相关工具来识别和防止SQL注入攻击。通过实际案例分析，帮助读者理解SQL注入的危害，并掌握有效的防御策略。 ... [详细]

蜡笔小新 2024-11-28 19:57:23
js
深入探讨：从代码到Kubernetes部署的微服务实践——网关篇

本文详细介绍了如何利用go-zero框架从需求分析到最终部署至Kubernetes的全过程，特别聚焦于微服务架构中的网关设计与实现。项目采用了go-zero及其生态组件，涵盖了从API设计到RPC调用，再到生产环境下的监控与维护等多方面内容。 ... [详细]

蜡笔小新 2024-11-28 17:56:12
js
匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾（上）

匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾（上） ... [详细]

蜡笔小新 2024-11-28 16:47:46
js
Git 提交时如何忽略已提交或从远程仓库拉取但本地已修改的文件

本文介绍了如何使用 Git 命令来忽略那些已经提交或者从远程仓库拉取但在本地进行了修改的文件，避免这些文件在不必要的时候被再次提交。 ... [详细]

蜡笔小新 2024-11-28 16:13:24
js
如何实现类似CSDN博客的页面返回顶部功能

本文将详细介绍如何实现类似于CSDN博客的页面返回顶部功能，通过调整返回速度和图标显示条件，使用户体验更加流畅。适合前端开发者参考学习。 ... [详细]

蜡笔小新 2024-11-27 18:22:17
js
Python中调用Java代码的方法与实践

本文探讨了如何在Python环境中集成并调用Java代码，通过具体的步骤和示例展示了这一过程的技术细节。适合对跨语言编程感兴趣的开发者阅读。 ... [详细]

蜡笔小新 2024-11-27 17:54:57
js
利用 CSS 自定义浏览器中的光标样式

本文介绍如何通过 CSS 设置不同的光标样式，以提升网页的用户体验。 ... [详细]

蜡笔小新 2024-11-27 16:33:14
js
抽象工厂模式 c++

抽象工厂模式包含如下角色：AbstractFactory：抽象工厂ConcreteFactory：具体工厂AbstractProduct：抽象产品Product：具体产品https ... [详细]

蜡笔小新 2024-11-27 13:21:30
js
Spring Boot 初学者指南（第一部分）

本文介绍了Spring Boot框架的基础知识，包括其设计理念、主要优势以及如何简化传统的J2EE开发流程。 ... [详细]

蜡笔小新 2024-11-27 10:39:14
node.js
酷家乐 Serverless FaaS 产品实践探索

本文探讨了酷家乐在 Serverless FaaS 领域的实践与经验，重点介绍了 FaaS 平台的构建、业务收益及未来发展方向。 ... [详细]

蜡笔小新 2024-11-27 10:22:39
node.js
ODB 2.1.0 版本发布，增强型C++ ORM框架

ODB 2.1.0 版本现已推出，此更新引入了多项新功能，如通过访问器、修饰符、函数及表达式访问数据成员，支持虚拟数据成员，并允许在数据成员上直接定义数据库索引等。 ... [详细]

蜡笔小新 2024-11-27 01:34:26
node.js
PHP电商平台的开发成本分析

本文深入探讨了PHP电商网站的开发成本，涵盖从基础建站到高级定制的各种费用因素。 ... [详细]

蜡笔小新 2024-11-28 16:33:58
layout
代码优化：避免重复和提高可读性

本文讨论了在处理分页数据时常见的低级错误，并提供了优化后的代码示例，以减少重复代码并提高可读性和维护性。 ... [详细]

蜡笔小新 2024-11-28 15:27:32
layout
python 类class学习总结（程序验证，超详细，包括多继承、循环、super（）.xxx等）

python 类class学习总结（程序验证，超详细，包括多继承、循环、super（）.xxx等） ... [详细]

蜡笔小新 2024-11-27 17:34:00
layout
美国网络安全：MITRE Shield 积极防御知识库解析

本文深入解析了MITRE Shield积极防御知识库，探讨其在网络安全领域的应用及意义。 ... [详细]

蜡笔小新 2024-11-27 17:06:27

yangyang19890811

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章