Bouw een Canvas Image Editor met Canvas

Vervolgens initialiseren we nog twee variabelen, maar stellen hun waarden in op nul voorlopig. Deze worden gebruikt om de breedte en hoogte op te slaan waarvan de grootte wijzigbaar is tot wanneer de grootte wordt gewijzigd. Deze variabelen worden ingevuld en later in de functie gebruikt. De xpos en YPOS variabelen worden gebruikt om een ​​tooltip te plaatsen die we in een oogwenk creëren. Ze positioneren de tooltip 5 pixels vanaf de linkerrand en de bovenrand van het canvas.

Vervolgens initialiseren we de aanpasbaarheid met behulp van jQuery UI's resizable () methode. We configureren de aanpasbare zodat de beeldverhouding vergrendeld is; ons beeld is vierkant, dus we willen dat het vierkant blijft, ongeacht de afmeting van het formaat. We zorgen er ook voor dat het beeld niet in omvang kan worden vergroot, zodat de kwaliteit van het beeld behouden blijft. Als het beeld werd vergroot in plaats van gekrompen, zou het worden geblokkeerd. De Maximale wijdte en maximale hoogte configuratie-opties zorgen ervoor dat de afbeelding alleen kleiner kan worden gemaakt. Beide zijn respectievelijk ingesteld op de huidige breedte en hoogte van het canvas.

De aanpasbare component heeft enkele aangepaste event-handlers die we kunnen toewijzen aan functies die zullen worden uitgevoerd wanneer deze aangepaste events worden geactiveerd. We gebruiken twee van deze gebeurtenishandlers voor dit voorbeeld; verkleinen, die elke keer dat de schaalgrootte wordt gewijzigd, wordt geactiveerd, en hou op die wordt afgevuurd zodra de grootte aanpasbaar is geëindigd.

De functie voor het wijzigen van de grootte kan twee argumenten ontvangen; de eerste is een gebeurtenisobject, dat we in dit voorbeeld niet hoeven te gebruiken, maar dat moet worden gedeclareerd om gebruik te maken van het tweede argument, dat we wel nodig hebben. Het tweede argument is een object dat nuttige informatie bevat over de grootte van de grootte, inclusief de grootte waarnaar deze is gewijzigd. Het eerste dat we in deze functie doen, is de nieuwe grootte van de grootte aan ons toe te wijzen resizeWidth en resizeHeight variabelen met behulp van eigenschappen van de ui object dat de functie ontvangt.

Het laatste wat deze functie doet is de tooltip maken die de gebruiker vertelt hoe groot de aanpasbaarheid momenteel is. Als deze tooltip al bestaat, hoeven we deze niet opnieuw te maken en kan de interne tekst gewoon worden ingesteld op een tekenreeks die de huidige grootte van de grootte van de grootte aangeeft. Als de knopinfo nog niet bestaat, zoals de eerste keer dat de grootte van de schaal wordt gewijzigd, maken we deze helemaal opnieuw. De tooltip wordt gepositioneerd met behulp van de xpos en YPOS die we eerder hebben gemaakt. De string is vanaf nul opgebouwd telkens wanneer de grootte wijzigbaar is. De tooltip zal als volgt verschijnen:

De stopfunctie, die eenmaal wordt uitgevoerd wanneer de wijziging van de grootte verandert, maakt eerst een nieuw dialoogvensterelement dat controleert of de bezoeker het nieuwe formaat op het canvas wil toepassen. Opnieuw is het dialoogvenster zo geconfigureerd dat het zelf niet aanpasbaar is en dus modaal is. We voegen ook een aantal knoppen toe aan dit dialoogvenster. De eerste is a annuleren knop, waarmee de bezoeker de grootte van de bewerking kan wijzigen zonder het nieuwe formaat toe te passen. Het enige wat we hier doen, is het huishouden, het verwijderen van de dialoog, de aanpasbaarheid en de tooltip.

We maken ook een Ja knop die het nieuwe formaat toepast. We doen ook dezelfde huishoudelijke taken hier, maar om de nieuwe maat toe te passen, maken we opnieuw een nieuwe afbeelding op dezelfde manier als we al verschillende keren hebben gedaan. Het nieuwe formaat van het canvas instellen is extreem eenvoudig; we geven alleen de waarden op waarvan de grootte is gewijzigd in de eigenschappen width en height van het canvaselement. Hier is het dialoogvenster, dat hetzelfde lijkt als het dialoogvenster Opslaan van eerder, alleen met verschillende inhoud:

De rgb-waarden van afzonderlijke pixels wijzigen

Ik heb eerder gezegd dat we volledige pixel-niveau controle hebben over de inhoud van het canvas-element, dus onze laatste twee knoppen op de werkbalkknop zullen precies dat doen. De eerste functie wordt gebruikt om de afbeelding in grijswaarden om te zetten, de tweede functie verandert de afbeelding in een sepiatint. We zullen eerst naar de grijsschaalfunctie kijken:

greyscale: function () // haal afbeeldingsgegevens var imgData = context.getImageData (0, 0, editor.width, editor.height), pxData = imgData.data, length = pxData.length; voor (var x = 0; x < length; x+=4)  //convert to grayscale var r = pxData[x], g = pxData[x + 1], b = pxData[x + 2], grey = r * .3 + g * .59 + b * .11; pxData[x] = grey; pxData[x + 1] = grey; pxData[x + 2] = grey;  //paint grayscale image back context.putImageData(imgData, 0, 0); ,

Het eerste dat deze functie moet doen, is de huidige pixelgegevens van het canvas ophalen. Wij gebruiken de getImageData () methode om dit te doen. Deze methode accepteert vier argumenten, die hetzelfde zijn als de clearRect () methode waar we eerder naar keken - de eerste twee argumenten zijn de X en Y posities om te beginnen met het verzamelen van gegevens van en de derde en vierde zijn de breedte en hoogte van het te bereiken gebied. We willen het hele canvas zodat we beginnen bij 0,0 (linksboven) en doorgaan voor de breedte en hoogte van het canvas. Het resulterende object dat door de methode wordt geretourneerd, wordt opgeslagen in de imgData veranderlijk.

Het object dat in deze variabele is opgeslagen, heeft een eigenschap genaamd gegevens; binnen deze eigenschap is een array met de r g b en alpha-waarden voor elke afzonderlijke pixel in het canvas, dus het eerste item in de array bevat de r waarde van de eerste pixel, het tweede item bevat de g waarde van de eerste pixel, de derde bevat de b waarde van de eerste pixel en het vierde item bevat de alpha-waarde van de eerste pixel. Deze array is ongelooflijk groot; een afbeelding van 480 bij 480 pixels bevat 230400 pixels en we hebben vier items voor elke afzonderlijke pixel. Dit maakt de array in totaal 921600 items lang! Deze lengte wordt ook opgeslagen voor gebruik in de voor loop die we hierna definiëren.

De for-lus is een beetje anders dan gebruikelijk voor loops. Onthoud dat de array kan worden georganiseerd in discrete blokken van 4 items, waarbij elk item in een enkel blok verwijst naar de individuele rgba-componenten, dus we doorlopen de array vier items tegelijk. Op elke iteratie krijgen we elke pixelcomponent en gebruiken dan de formule r * .3 + g * .59 + b * .11 om ze allemaal in grijswaarden om te zetten. Vervolgens slaan we de geconverteerde pixelcomponent weer op naar het oorspronkelijke array-item.

Nadat we de hele array in een lus hebben geplaatst, kunnen we de array-inhoud terug naar het canvas schrijven en elke originele pixel vervangen door de nieuwe tegenhanger in grijswaarden. putImageData () methode, die gewoon het tegenovergestelde doet getImageData ().

De sepiakleurfunctie is identiek aan de grijswaardenfunctie, behalve dat we een andere formule gebruiken om elk te converteren r g b component tot sepiatint:

sepia: function () // haal afbeeldingsgegevens var imgData = context.getImageData (0, 0, editor.width, editor.height), pxData = imgData.data, length = pxData.length; voor (var x = 0; x < length; x+=4)  //convert to grayscale var r = pxData[x], g = pxData[x + 1], b = pxData[x + 2], sepiaR = r * .393 + g * .769 + b * .189, sepiaG = r * .349 + g * .686 + b * .168, sepiaB = r * .272 + g * .534 + b * .131; pxData[x] = sepiaR; pxData[x + 1] = sepiaG; pxData[x + 2] = sepiaB;  //paint sepia image back context.putImageData(imgData, 0, 0); 

Hier is een foto van de afbeelding nadat deze is geconverteerd naar sepiatint:

Conclusie

In deze zelfstudie hebben we gezien hoe het canvas kan worden omgezet in een krachtige afbeeldingseditor die ons een deel van de functionaliteit biedt van de eenvoudige, op toepassingen gebaseerde afbeeldingseditors waarmee we vertrouwd zijn. Dit voorbeeld kan eenvoudig worden uitgebreid om andere functies toe te voegen, zoals bijsnijden en tekenen met een potloodtool, hoewel ik de toevoeging van deze functionaliteit aan u overlaat. Bedankt voor het lezen.