canvas之自定义头像功能实现代码示例

作者246天天好彩免费大全：ryyyyy 字体：[ ] 来源246天天好彩免费大全：互联网 时间：09-29 16:35:18

本篇文章主要介绍了canvas之自定义头像功能实现代码示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

写在最前：

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

成果展示：

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

功能说明：

实现细节：

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

function createCanvasByClassName(tag) { var canvasInitialWidth = $('.' + tag).width(); var canvasInitialHeight = $('.' + tag).height(); var left = $('.' + tag).offset().left - $('.' + tag).parent('.portraitContainer').offset().left + 1; var top = $('.' + tag).offset().top - $('.' + tag).parent('.portraitContainer').offset().top + 1; //var left = $('.' + tag).offset().left + 1; //var top = $('.' + tag).offset().top + 1; clearCanvasObj.left = $('.' + tag).offset().left + 1; clearCanvasObj.top = $('.' + tag).offset().top + 1; // clearCanvasObj.left = left; // clearCanvasObj.top = top; var canvasElement = $('<canvas></canvas>'); var randomNum = Math.floor(getRandom(0, 10000)); clearCanvasObj.canvasId = randomNum; canvasElement.attr({ id: 'canvas', width: canvasInitialWidth, height: canvasInitialHeight }); canvasElement.css({ position: 'absolute', top: top, left: left }); //$('body').append(canvasElement); var appendEle = $('.portraitContainer').append(canvasElement); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //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 = 'move'; } 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 = 'se-resize'; } else { clearCanvasObj.isCanvasArea = false; //clearCanvasObj.isRightCorner = false; imgContainerCanvas.style.cursor = 'default'; } var outerDomWidth = $(".imgContainer").width(); var outerDomHeight = $(".imgContainer").height(); var xDistance = event.clientX - clearCanvasObj.mouseX; var yDistance = event.clientY - clearCanvasObj.mouseY; //var outerCTX = canvas.getContext('2d'); //移动小方框 if (clearCanvasObj.beginDraw && clearCanvasObj.isCanvasArea && !clearCanvasObj.isRightCorner) { ry_CTX.fillStyle = clearCanvasObj.color; // console.log('1', 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('2', 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; } }