Content
- Què és el llenç HTML5?
- Què és Base64?
- Com obtenir dades d'imatge de llenç mitjançant toDataURL ()
- Què podem fer amb toDataURL ()?
- Com es carreguen les dades de la imatge Base64 en un llenç HTML5
- Conclusió
Simeon Visser és un escriptor a qui li agrada tractar temes com la tecnologia i els viatges.
Per a moltes aplicacions web pot ser útil convertir la imatge visual en un llenç HTML5 en una representació base64 que es pugui enviar i compartir. Com us mostrarà aquest tutorial, això no és molt difícil i també és molt senzill carregar una imatge base64 en un llenç HTML5. El mètode toDataURL () d’un llenç té un paper important en aquest procés i us mostraré com utilitzar-lo.
En aquest tutorial, veureu les dues tècniques per convertir una imatge a base64 i com passar de base64 a una imatge. També parlaré d'algunes maneres possibles en què es pot utilitzar aquesta funcionalitat en llocs web interactius.
Què tal un lloc web on podeu compartir les vostres pròpies imatges amb altres persones? Aquesta funcionalitat s’implementa fàcilment amb les tècniques descrites en aquest tutorial. Més endavant posaré altres exemples en aquest tutorial.
Què és el llenç HTML5?
El llenç HTML5 és una de les meves adicions preferides a l'estàndard web HTML. Amb ell podeu escriure algun codi JavaScript per dibuixar directament a les vostres pàgines web. He escrit diversos tutorials que expliquen els conceptes bàsics sobre com dibuixar sobre un llenç i com fer diverses coses, com ara crear text, cercles i arcs.
- Tutorial HTML5: conceptes bàsics del dibuix sobre tela
En aquest tutorial us mostraré com utilitzar l'element canvas en HTML5 per dibuixar gràfics de colors per al vostre lloc web. El tutorial inclou dos exemples rics que s’expliquen pas a pas. - Tutorial HTML5: Dibuix de text amb efectes i colors fantàstics
Podeu fer molt més que dibuixar text en HTML5. En aquest tutorial mostraré diversos efectes per fer alguns textos elegants, incloses ombres, degradats i rotació. - Tutorial HTML5: dibuix de cercles i arcs sobre llenç
Dibuixar cercles i arcs en HTML5 pot ser tot un repte. En aquest tutorial explico com dibuixar cercles i arcs i com es mesuren els angles dels arcs. Aquest tutorial conté molts exemples.
Què és Base64?
Base64 és una manera de representar dades utilitzant només caràcters llegibles com ara lletres, números i alguns símbols com el símbol més. Aquestes dades poden ser qualsevol cosa, com una imatge o un fitxer, però normalment són dades que no són de text pla (en cas contrari no té gaire sentit convertir-les a base64).
Aquesta representació, també coneguda com a cadena base64, és molt útil perquè es pot utilitzar a qualsevol lloc on també es pugui fer servir text normal. Facilita l’emmagatzematge de les imatges; per exemple, podeu tenir diverses imatges en un fitxer de text pla.
Els detalls exactes de com funciona base64 no són rellevants per a aquest tutorial. Tot el que importa és que base64 és una forma diferent de representar les mateixes dades visuals de la imatge, però de manera textual. Referiré el lector interessat a l’article base64 a Viquipèdia si en voleu saber més.
Com obtenir dades d'imatge de llenç mitjançant toDataURL ()
El llenç en HTML5 té un mètode anomenat toDataURL () al qual podeu trucar per convertir un llenç HTML5 en una imatge PNG i obtenir les dades de la imatge d’aquest llenç. Per defecte, us proporcionarà una representació base64 de la imatge en format PNG. En termes més senzills, obtindreu una imatge PNG, però s’ha codificat a base64. Per al mètode toDataURL (), el format PNG és l'únic format d'imatge compatible amb tots els navegadors web compatibles amb HTML5. Alguns navegadors admeten diversos formats d’imatge.
Podeu trucar a DataURL amb un argument, com ara "image / jpeg" o "image / png" si voleu especificar quin format d'imatge voleu. No ens hem de preocupar d'això i simplement podem trucar a DataURL sense arguments per obtenir una imatge PNG en representació base64. Tingueu en compte que l'estàndard HTML5 només requereix que els navegadors admetin PNG per a toDataURL, de manera que és millor utilitzar aquest format d'imatge si voleu que el vostre codi funcioni a tots els navegadors web.
Al següent codi tenim un llenç i estem trucant al mètode toDataURL () per obtenir les dades de la imatge.
canvas id = "mycanvas" width = "300" height = "300"> / canvas> script type = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); ctx.beginPath (); ctx.arc (100, 100, 50, 1,5 * Math.PI, 0,5 * Math.PI, fals); ctx.lineWidth = 10; ctx.stroke (); var imgData = canvas.toDataURL (); / script> La variable imgData ara conté una representació base64 de la imatge que hi ha actualment al llenç. Sembla una cosa així: dades: image / png; base64, iVBORw0 ... AAAElFTkSuQmCC. Només he mostrat el principi i el final de les dades perquè seria massa mostrar-les totes. Com podeu veure, comença per "dades:", després el tipus d'imatge ("imatge / png"), després la codificació ("base64") i, finalment, totes les dades de la imatge en text. Simplement trucant aDataURL () hem convertit la imatge en una representació textual. Això és bo, perquè el text és molt més fàcil de compartir o d’enviar. De fet, si copieu tota aquesta representació textual de la imatge i l’envieu a una altra persona, la pot enganxar a la barra d’adreces del navegador i veuran la imatge.
Què podem fer amb toDataURL ()?
Què podem fer amb aquestes dades?
- Podríem enviar la cadena base64 al servidor per emmagatzemar-la en una base de dades. Un usuari podria crear una imatge mitjançant un editor d’imatges de llenç HTML5 i la imatge es podria enviar al lloc web. La imatge es podria emmagatzemar com a cadena base64 a la base de dades i es pot carregar i mostrar fàcilment en un llenç (vegeu més endavant en aquest tutorial sobre com fer-ho). La gent podria crear i compartir art d’aquesta manera.
- Podem crear funcionalitats de desfer / refer per a un editor d’imatges de llenç com aquest. Podeu fer un seguiment de totes les modificacions que fa l’usuari i podeu desar totes les versions de la imatge com una cadena base64. Si l'usuari s'ha equivocat i vol desfer l'edició més recent, podeu carregar l'última base64 i mostrar-la al llenç.
- Una funcionalitat "enviar imatge per correu electrònic". Com potser sabeu o no, base64 també s'utilitza quan adjunteu una imatge (o qualsevol fitxer al respecte) a un correu electrònic. Ara un lloc web pot oferir la possibilitat d’enviar una imatge als vostres amics per correu electrònic. Simplement rep la imatge vostra en representació de base64 i després composa un correu electrònic amb les dades de base64 incloses.
Com es carreguen les dades de la imatge Base64 en un llenç HTML5
Ara també voleu fer el contrari: si teniu una representació base64 d’una imatge, com podem carregar les dades de la imatge base64 en un llenç HTML5? Això no és difícil perquè simplement podem crear una imatge, assignar les dades a aquesta imatge i després dibuixar la imatge. Aquí teniu el codi JavaScript per fer-ho.
var myImage = nova imatge (); myImage.src = imgData; ctx.drawImage (myImage, 0, 0);
La variable imgData conté les dades de la imatge base64. Si el llenç anteriorment estava buit, ara veureu la nostra imatge un cop més al llenç. Després d'això, podeu tornar a utilitzar toDataURL () per obtenir les dades en representació base64.
Conclusió
En aquest tutorial hem vist com prendre la imatge que es mostra en un llenç HTML5, com convertir-la en una cadena base64 i com fer el contrari: hem vist com carregar una imatge base64 en un llenç HTML5. El que feu amb aquestes cadenes base64 depèn totalment de vosaltres.
Bona sort amb els vostres projectes de desenvolupament web i una codificació feliç!
Aquest article és precís i fidel al millor coneixement de l'autor. El contingut només té finalitats informatives o d’entreteniment i no substitueix l’assessorament personal ni l’assessorament professional en qüestions comercials, financeres, legals o tècniques.
