Comment utiliser Canvas pour implémenter la fonction d'avatar personnalisé

Cette fois, je vais vous montrer comment utiliser Canvas pour implémenter la fonction d'avatar personnalisé, et quelles sont les précautions pour utiliser Canvas pour implémenter la fonction d'avatar personnalisé. Voici un cas pratique, prenons un. regarder.

Écrivez-le d'abord :

Il y a deux jours, le patron m'a dit que la fonction d'avatar personnalisé sur le site officiel de Tiger est implémentée en flash. Il n'y a pas Si vous l'avez installé, vous devez manuellement "autoriser" l'exécution du flash. On m'a donc demandé d'utiliser Canvas pour implémenter la même fonction. Héhé, j'étudiais Canvas récemment, alors j'ai accepté avec plaisir (en fait, n'êtes-vous pas d'accord si vous ne l'avez pas étudié, hahahaha~)

Affichage des résultats :

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

Description de la fonction :

• Faites glisser la petite case à gauche, ou placez la souris en bas coin droit de la petite boîte et cliquez sur Lorsque la boîte est étirée, l'image recouverte par la boîte est automatiquement capturée puis redessinée dans plusieurs conteneurs sur la droite.

• Entrez la largeur et la hauteur pour personnaliser la taille de l'avatar dont vous avez besoin. Actuellement, seules les images d'avatar ayant la même largeur et la même hauteur sont prises en charge.

Détails de mise en œuvre :

Parce que vous souhaitez prendre une capture d'écran de la zone où se trouve l'image, vous devez créer une toile couvrant la zone où se trouve l’image. Ici, nous donnons une fonction pour créer un canevas à la même position en fonction du nom de classe de l'élément dans le DOM passé, et le recouvrons sur l'élément DOM d'origine :

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

Avec ce canevas, vous pouvez faire ce que vous voulez dans la zone où se trouve votre photo. Tout d’abord, peignez toute la zone avec une légère ombre noire, puis effacez la couleur à l’intérieur de la petite zone initiale de la boîte. Ajoutez ensuite les événements mousedown, mousemove et mouseup à la page entière. Les fonctions qu'ils effectuent sont similaires à la fonction glisser-déposer que vous implémentez sur la page. Nous nous concentrons ici sur les opérations effectuées dans 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('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;
    }                            
}

Dans la fonction, vous devez faire attention aux conditions limites du glissement. L'une est que la boîte ne peut pas être déplacée vers la limite en dehors du DOM où se trouve l'image. est placé dans la zone où se trouve la petite case, le style de la souris est modifié. Pendant le processus de glissement de la boîte, nous redessinons continuellement la zone mobile de la boîte (c'est-à-dire dessinons continuellement des ombres), puis appelons la fonction clearRect à la nouvelle position pour effacer à nouveau une petite boîte. Pendant le processus de glisser ou d'étirement, nous appellerons en permanence la fonction ProduceSmallPic pour redessiner en continu l'avatar requis en fonction de la taille du conteneur dans le conteneur de droite (chaque conteneur est un canevas). Le code est le suivant :

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

Parlons du rôle de cette fonction. Ici, nous devons faire attention à un paramètre imageURL. Cette URL est convertie à partir du DOM où se trouve l'image. Parce que vous devez transformer la zone où se trouve le DOM en image, afin de pouvoir utiliser la fonction drawImage pour capturer la zone dont vous avez besoin. Nous utilisons donc d'abord la fonction de la bibliothèque html2canvas pour convertir le DOM où se trouve l'image en canevas. Le contenu de ce canevas contient l'image que vous souhaitez intercepter, puis convertissons ce canevas en image pour obtenir l'adresse de l'image imageURL Le code. est la suivante :

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

Ensuite, vous pouvez utiliser le conteneur de toile à droite et y remettre l'image. L'ensemble du processus se termine ainsi. Avec le recul, ce n'est pas très simple.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

H5 implémente une animation de chemin personnalisé dans Canvas

Comment appeler l'APP dans la page H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!