Code example for implementing the custom avatar function of canvas

Code example for implementing the custom avatar function of canvas

Preface:

Two days ago, the boss told me that the custom avatar function on the official website of the tiger was implemented in flash. If it was not installed, he had to manually "allow" falsh to run. So let me use canvas to implement the same function. Hey hey, I 've been studying canvas recently, so I readily agree (in fact, if you haven't studied it, don't you agree? Haha ~)

Result Display:

Git address: https://github.com/ry928330/portraitDIY

Function Description:

• Drag the small box on the left, or place the mouse in the lower right corner of the small box, and click to stretch the box. The picture covered by the box is automatically captured, and then re-painted in multiple containers on the right.
• Enter the width and height to customize the size of the custom avatar. Currently, only images with the same width and height are supported.

Implementation Details:

You must create a canvas to cover the area where the image is located. Here, we provide a function that creates a canvas with the same position based on the class name of the element in the imported DOM and covers the original DOM element:

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;}

With this canvas, you can operate in the region where your image is located. First, drop the entire area to draw a light black shadow, and then erase the color in the initial small box area. Then add the mousedown, mousemove, and mouseup events to the entire page. Their functions are similar to implementing a drag-and-drop function on the page. Here, we will focus on the operations in the mousemove. The Code is as follows:

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 '); // move the small box 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; // determines whether the box has reached the boundary 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;} // drag the small box 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 ;}}

In the function, you need to pay attention to the drag boundary condition. One is that the box cannot be dragged outside the DOM where the image is located. The other is to change the mouse style when you place the cursor in the area where the small box is located. While the box is being dragged, we constantly re-draw the area where the box is moved (that is, the area where the box is shadow), call the clearRect function in a new position, and re-erase a small box. During the drag and drop or stretch process, we will constantly call the produceSmallPic function. In the container on the right (each container is a canvas), we will re-draw the desired avatar based on the container size. The Code is as follows:

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('2d'));            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);        })    }}

Let's talk about the role of this function. Here we should pay attention to a parameter imageURL, which is converted by the image's DOM. Because you need to change the area where the DOM is located into an image, so that you can use the drawImage function to intercept the area you need. Therefore, we first use the html2canvas library function to convert the DOM of the image to canvas. The content of this canvas contains the image you want to intercept, then convert the canvas into an image and obtain the image address imageURL. The Code is as follows:

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

Next, you can facilitate the canvas container on the right to say that the picture is re-sent to the inside, and the whole process ends like this. It is very easy to look back.

Related dependencies:

The Code is as follows:
<Script src = "<a href =" https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js "> </script"> https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js "> </script </a>

Conclusion:

For canvas operations, it is important to pay more attention to the boundary conditions and when to re-paint and when to clear them. The logic is clear, so there are just a few canvas APIs, and the operations are not so troublesome. Finally, thank you for your reference. I am not very clear about what you have written. If you do not understand it, you can discuss it together ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.