Babban matsalar da ke da alaฦa da canza zanen HTML zuwa fayil na PNG shine cewa zanen HTML ba ainihin hoto bane, sai dai wani abu mai ฦarfi. Wannan yana nufin cewa ba za a iya canza shi kai tsaye zuwa fayil ษin hoto kamar PNG ba tare da an fara canza shi zuwa tsarin hoto ba. Don yin wannan, dole ne a sanya zanen zuwa madaidaicin allo sannan a fitar dashi azaman fayil ษin hoto. Wannan tsari na iya zama mai rikitarwa kuma yana ษaukar lokaci dangane da rikitaccen zane da abin da ke cikinsa. Bugu da ฦari, wasu fasalulluka na zane kamar inuwa ko gradients maiyuwa ba za su iya yin daidai lokacin da aka canza su zuwa tsarin hoto ba.
To convert a HTML canvas into a PNG file, you can use the <code>toDataURL()</code> method of the canvas element. This method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL('image/png'); // defaults to png, can also use 'image/jpeg'
</script>
1. Layin farko ya ฦirฦiri sigar zane tare da id na "myCanvas" da faษi da tsayi na 200px da 100px bi da bi.
2. Layi na biyu ya haifar da wani canji mai suna "canvas" wanda ke adana abubuwan HTML tare da id na "myCanvas".
3. Layi na uku ya haifar da mabambanta mai suna "dataURL" wanda ke adana bayanan URI da aka dawo dasu toDataURL() Hanyar, ta amfani da 'image/png' azaman nau'in siga (tsoho zuwa PNG).
JPEG vs PNG tsarin fayil don gidan yanar gizon
JPEG da PNG sune nau'ikan fayilolin hoto da aka fi amfani dasu akan gidan yanar gizo. JPEG shine tsarin matsawa mai asara, ma'ana cewa wasu bayanan hoto suna ษacewa lokacin da aka matsa fayil ษin. Wannan ya sa ya dace don hotuna da sauran hadaddun hotuna inda za a iya sadaukar da wasu dalla-dalla don ฦaramin girman fayil. PNG, a gefe guda, tsarin matsawa ne mara asara, ma'ana cewa babu bayanan da ke ษacewa yayin matsawa. Wannan ya sa ya dace don hotuna tare da layi mai kaifi da rubutu, kamar tambura ko gumaka.
Fayilolin JPEG sun kasance sun fi ฦanฦanta fiye da fayilolin PNG, yana sa su sauri don saukewa da sauฦi don adanawa akan sabar yanar gizo. Duk da haka, ฦila ba za su yi kama da kaifi ko bayyananne kamar takwarorinsu na PNG ba saboda asarar matsawa algorithm da aka yi amfani da su a cikin JPEGs.
Fayilolin PNG sun fi JPEGs girma amma suna ba da ingantattun hotuna masu inganci tare da ingantattun layuka da ingantattun launuka. Suna kuma goyan bayan fayyace wanda zai iya zama da amfani yayin ฦirฦirar tambura ko gumaka tare da bayyanannun tushe. Koyaya, suna iya ษaukar lokaci mai tsawo don saukewa saboda girman girman fayil ษin su idan aka kwatanta da JPEGs.
Menene zane
Canvas wani abu ne na HTML wanda za'a iya amfani dashi don zana zane-zane akan shafin yanar gizon ta amfani da harsunan rubutun kamar JavaScript. Ana amfani da shi don ฦirฦirar zane-zane, raye-raye, wasanni, da sauran abubuwan wadatar hoto. Kayan zane yana da hanyoyi da yawa don zana hanyoyi, kwalaye, da'ira, rubutu da ฦara hotuna. Hakanan yana da halaye da yawa don saita faษi da tsayin wurin zane da sauran kaddarorin kamar launi na bango.
Yadda ake canza zane HTML zuwa PNG
Mayar da zane HTML zuwa hoton PNG tsari ne mai sauฦi.
1. ฦirฦiri nau'in zane na HTML a cikin shafinku:
2. Zana wani abu akan zane:
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.fillStyle = "# FF0000";
ctx.fillRect (0,0,150,75);
3. Sami URL ษin bayanai na zane:
var dataURL = document.getElementById("myCanvas").toDataURL();
4. Maida URL ษin bayanan zuwa hoton PNG:
var img = sabon Hoto();
img.src = dataURL;
