So verwenden Sie Canvas, um eine benutzerdefinierte Avatar-Funktion zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie Canvas zum Implementieren der benutzerdefinierten Avatar-Funktion verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Canvas zum Implementieren der benutzerdefinierten Avatar-Funktion gelten. Hier ist ein praktischer Fall sehen.

Schreiben Sie es zuerst:

Vor zwei Tagen teilte mir der Chef mit, dass die benutzerdefinierte Avatar-Funktion auf der offiziellen Website von Tiger in Flash implementiert ist. Es gibt keine Option. Wenn Sie es installiert haben, müssen Sie die Ausführung von Flash manuell „erlauben“. Also wurde ich gebeten, Canvas zu verwenden, um dieselbe Funktion zu implementieren. Hehe, ich habe kürzlich Canvas studiert, also habe ich gerne zugestimmt (würden Sie eigentlich nicht zustimmen, wenn Sie es nicht studiert hätten, hahahaha~)

Ergebnisanzeige:

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

Funktionsbeschreibung:

• Ziehen Sie das kleine Kästchen links oder platzieren Sie die Maus unten Klicken Sie auf die rechte Ecke des kleinen Kästchens und klicken Sie auf Wenn das Kästchen gedehnt wird, wird das von dem Kästchen abgedeckte Bild automatisch erfasst und dann in mehreren Containern auf der rechten Seite neu gezeichnet.

• Geben Sie die Breite und Höhe ein, um die benötigte Avatargröße anzupassen. Derzeit werden nur Avatarbilder mit derselben Breite und Höhe unterstützt.

Details zur Implementierung:

Weil Sie einen Screenshot des Bereichs machen möchten, in dem sich das Bild befindet, Sie Sie müssen eine Leinwand erstellen, die den Bereich abdeckt, in dem sich das Bild befindet. Hier geben wir eine Funktion an, um eine Leinwand an derselben Position basierend auf dem Klassennamen des Elements im übergebenen DOM zu erstellen und sie auf dem ursprünglichen DOM-Element abzudecken:

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

Mit dieser Leinwand können Sie Sie können in dem Bereich, in dem sich Ihr Bild befindet, alles tun, was Sie wollen. Malen Sie zunächst den gesamten Bereich mit einem hellen schwarzen Schatten und löschen Sie dann die Farbe innerhalb des ursprünglichen kleinen Kästchenbereichs. Fügen Sie dann die Ereignisse „Mousedown“, „MouseMove“ und „MouseUp“ zur gesamten Seite hinzu. Die von ihnen ausgeführten Funktionen ähneln der Drag-and-Drop-Funktion, die Sie auf der Seite implementieren. Der Code lautet wie folgt: >

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

In der Funktion müssen Sie auf die Randbedingungen beim Ziehen achten. Zum einen kann das Feld nicht an die Grenze außerhalb des DOM gezogen werden, zum anderen, wenn Sie mit der Maus darauf klicken in dem Bereich platziert wird, in dem sich das kleine Kästchen befindet, ändert sich der Stil der Maus. Während des Ziehvorgangs der Box zeichnen wir den Bewegungsbereich der Box kontinuierlich neu (dh zeichnen ständig Schatten) und rufen dann die Funktion clearRect an der neuen Position auf, um eine kleine Box erneut zu löschen. Während des Zieh- oder Dehnungsvorgangs rufen wir kontinuierlich die Funktion „produceSmallPic“ auf, um den erforderlichen Avatar kontinuierlich entsprechend der Containergröße im Container auf der rechten Seite neu zu zeichnen (jeder Container ist eine Leinwand). Der Code lautet wie folgt:

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

Lassen Sie uns über die Rolle dieser Funktion sprechen. Hier müssen wir auf einen Parameter imageURL achten. Diese URL wird aus dem DOM konvertiert, in dem sich das Bild befindet. Weil Sie den Bereich, in dem sich das DOM befindet, in ein Bild umwandeln müssen, damit Sie die Funktion drawImage verwenden können, um den benötigten Bereich zu erfassen. Daher verwenden wir zunächst die Bibliotheksfunktion html2canvas, um das DOM, in dem sich das Bild befindet, in eine Leinwand umzuwandeln, die das Bild enthält, das Sie abfangen möchten, und konvertieren diese Leinwand dann in ein Bild, um die Bildadresse zu erhalten ist wie folgt:

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

Dann können Sie den Canvas-Container auf der rechten Seite verwenden und das Bild wieder hineinlegen. Rückblickend ist es nicht ganz einfach.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

H5 implementiert benutzerdefinierte Pfadanimationen in Canvas

So rufen Sie APP auf der H5-Seite auf

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Canvas, um eine benutzerdefinierte Avatar-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!