UltKit
படம்11
PDF13
ஆவணங்கள் & தரவு7
வீடியோ6
ஆடியோ4
மேலும் கருவிகள்22

HTML-ஐ PNG ஆக மாற்றும் கருவி

சேமித்த வலைப்பக்கம், டாஷ்போர்டு ஏற்றுமதி அல்லது காம்போனன்ட் மாக்கப்பை PNG ஆக மாற்றுங்கள்; ஒவ்வொரு எழுத்தும் மெல்லிய கோடும் உலாவி வரைந்தபடியே துல்லியமாக இருக்கும். சாளர அகலத்தைத் தேர்ந்தெடுங்கள், லேஅவுட் அதற்கேற்ப அமையும்.

ஆவணத்தைப் படமாக மாற்று

அல்லது DOC, DOCX, DOCM … கோப்புகள் இங்கே இழுத்து விடவும் ·

ஒரு கோப்புக்கு அதிகபட்சம் 95 MB· அதிகபட்சம் 20 கோப்புகள்· 30 நிமிடங்களுக்குப் பிறகு நீக்கப்படும்

வெளியீடு

கோப்புகள் எங்கள் சேவையகங்களில் செயலாக்கப்பட்டு 30 நிமிடங்களுக்குப் பிறகு நீக்கப்படும்.

இந்தக் கருவியை எப்படிப் பயன்படுத்துவது

  1. 1

    HTML கோப்பைச் சேர்க்கவும்

    ஒரு தொகுப்பில் அதிகபட்சம் 20 கோப்புகள், ஒவ்வொன்றும் 95 MB வரை என .html, .htm அல்லது .mhtml கோப்புகளைப் பதிவேற்றுங்கள். ஒரே MHTML கோப்பாகச் சேமித்த பக்கத்தின் உள்ளேயே அதன் படங்களும் ஸ்டைல்களும் இருக்கும்.

  2. 2

    சாளர அகலத்தை அமைக்கவும்

    HTML பக்க அகலம் 1280 px-இல் தொடங்கும். மொபைல் வடிவமைப்புக்கு 390 px, அகலமான டாஷ்போர்டுக்கு 1920 px பயன்படுத்துங்கள். இதற்கு மாற்று ஏற்கெனவே PNG ஆக உள்ளது; படங்கள் என்பது ஒரே நீளமான படம்.

  3. 3

    PNG ஆக மாற்றவும்

    PNG ஆக மாற்று → அழுத்துங்கள். பக்கத்துக்குச் சொந்தமாகப் பின்னணி நிறம் இல்லாமல், படம் வேறொரு வடிவமைப்பின் மீது வைக்கப்படுமானால், மேம்பட்ட அமைப்புகள் என்பதில் வெளிப்படையான பின்னணி என்பதை இயக்குங்கள்.

பதில்

HTML-ஐ PNG ஆக மாற்றுவது எப்படி?

.html அல்லது .mhtml கோப்பைப் பதிவேற்றி, HTML பக்க அகலம் என்பதை நீங்கள் பின்பற்ற விரும்பும் திரைக்கு அமைத்து, PNG ஆக மாற்று → அழுத்துங்கள். வரைந்த முழுப் பக்கமும் ஒரே இழப்பற்ற படமாகத் திரும்பும்.

எழுத்தும் கோடுகளும் கூர்மையாக இருக்க வேண்டுமெனில் HTML-ஐ PNG ஆக மாற்றுங்கள்

PNG 1996 முதல் W3C பரிந்துரையாக உள்ளது; இழப்பற்ற சுருக்கத்தைப் பயன்படுத்துவதால் 14 px உரையின் மென்மையாக்கப்பட்ட விளிம்புகள், ஒரு பிக்சல் அட்டவணை எல்லைகள், நிறமிட்ட கோட் ஆகியவை மாறாமல் இருக்கும். அதனால்தான் டெவலப்பர்கள் பிழை அறிக்கைகளுடன் PNG படங்களை இணைக்கின்றனர், வடிவமைப்பாளர்கள் மதிப்பாய்வுகளில் பகிர்கின்றனர்: மங்கலான விளிம்பு CSS சிக்கலா, சுருக்கக் குறைபாடா என யாரும் யோசிக்க வேண்டியதில்லை.

இதற்கான விலை கோப்பு அளவு. உரையும் ஒரே நிறமும் கொண்ட பக்கம் நன்றாகச் சுருங்கும்; போட்டோ நிறைந்த பக்கம் சுருங்காது. தெளிவான விவரத்தை விட அளவு முக்கியமான சாட் அல்லது மின்னஞ்சலுக்குப் படம் செல்லுமானால், JPG சிறிய கோப்பு. ஆவணங்கள், வெளியீட்டுக் குறிப்புகள், டாஷ்போர்டுகள், ஸ்டைல் கையேடுகளுக்கு PNG பாதுகாப்பான இயல்புத் தேர்வு.

அகலமே வடிவமைப்பை முடிவு செய்கிறது. HTML-க்கு நிலையான பக்கம் இல்லை: ஒரே கோப்பு 1280 px-இல் மூன்று நெடுவரிசை டெஸ்க்டாப் வடிவமைப்பையும், 390 px-இல் ஒரே அடுக்கு நெடுவரிசையையும் காட்டும். நீங்கள் உள்ளிடும் HTML பக்க அகலத்தில் (320 முதல் 3840 px வரை) மாற்றி பக்கத்தை அமைத்து, முதல் வரி முதல் அடிக்குறிப்பு வரை பிடிக்கிறது.

பொதுவான திரைகளுக்கான HTML to PNG மாற்றி அகலங்கள்

195:422

390 × 844 px

மொபைல்

பல புதிய iPhone-களின் CSS காட்சிப்பகுதி; மொபைல் வடிவமைப்பைக் காட்டும்

41:59

820 × 1180 px

டேப்லெட்

செங்குத்து நிலையில் iPad Air; பல தளங்கள் இங்கே அருகில் பிரேக்பாயிண்ட்டை மாற்றும்

8:5

1280 × 800 px

லேப்டாப்

இந்த மாற்றியின் இயல்பு அகலம்

16:9

1920 × 1080 px

Full HD மானிட்டர்

அகலமான டாஷ்போர்டுகள், அட்மின் பேனல்கள்

HTML

ஹைப்பர்டெக்ஸ்ட் மார்க்அப் மொழி

HTML என்பது வலையின் மார்க்அப் மொழி; 1990-களின் தொடக்கத்தில் Tim Berners-Lee இதை முதலில் விவரித்தார், இப்போது WHATWG இதை வாழும் தரநிலையாகப் பராமரிக்கிறது. HTML கோப்பு தலைப்புகள், பத்திகள், இணைப்புகள், அட்டவணைகள், படங்கள் மற்றும் படிவங்களை விவரிக்கும்; வடிவமைப்பு பொதுவாக CSS-இலிருந்து வரும். ஒவ்வொரு உலாவியும் இதைக் காட்டும்; மின்னஞ்சல் வார்ப்புருக்களுக்கும் சேமித்த வலைப்பக்கங்களுக்கும் பயன்படுகிறது. ஒரு HTML கோப்பு பெரும்பாலும் வெளிப்புறப் படங்கள் மற்றும் ஸ்டைல்ஷீட்களைச் சார்ந்திருப்பதால், தனியாக நகர்த்தினால் சிதைந்து தெரியலாம்.

சுருக்கம்
–
ஒளி ஊடுருவும் தன்மை
–
அனிமேஷன்
–
அறிமுகமான ஆண்டு
1993 · Tim Berners-Lee; maintained by WHATWG
HTML மாற்றி

PNG

Portable Network Graphics

PNG என்பது 1996-இல் PNG Development Group வெளியிட்ட இழப்பற்ற ராஸ்டர் வடிவம்; பின்னர் W3C, ISO தரப்படுத்தின. ஒவ்வொரு பிக்சலையும் அப்படியே வைத்திருக்கும், முழு ஆல்ஃபா ஒளி ஊடுருவலை ஆதரிக்கும், உரை, கூர்மையான விளிம்புகள், சமமான நிறங்களை குறைபாடின்றிக் கையாளும். இந்தத் துல்லியம் திரைப்பிடிப்புகள், லோகோக்கள், ஐகான்கள், இடைமுக வரைகலைக்கு ஏற்றது. குறை அளவு: PNG-ஆகச் சேமித்த புகைப்படங்கள் அதே படத்தின் JPEG அல்லது WebP-ஐ விட பல மடங்கு பெரிதாக இருக்கும். அனைத்து உலாவிகள், இயக்க முறைமைகள், எடிட்டர்கள் PNG-ஐத் திறக்கும்.

சுருக்கம்
இழப்பின்றி (Lossless)
ஒளி ஊடுருவும் தன்மை
ஆம்
அனிமேஷன்
இல்லை
அறிமுகமான ஆண்டு
1996 · PNG Development Group
PNG மாற்றி

பக்கம் பெரும்பாலும் உரை, கோட், அட்டவணைகள் அல்லது இடைமுகப் பகுதிகளாக இருக்கும்போது PNG தேர்ந்தெடுக்கப்படுகிறது: இழப்பற்ற பிக்சல்கள் மெல்லிய கோடுகளையும் சிறிய எழுத்துகளையும் தெளிவாக வைக்கின்றன; ஆவணங்கள், பிழை அறிக்கைகள், வடிவமைப்பு மதிப்பாய்வுகளில் JPG குறைபாடுகள் தெரியும் இடங்களில் இது உதவும்.

ஸ்டைல்களும் எழுத்துருக்களும் இழக்காமல் HTML-ஐ PNG ஆக மாற்ற

சாதாரண .html கோப்பு பெரும்பாலும் வேறிடத்தில் சேமித்தவற்றைச் சார்ந்திருக்கும்: css கோப்புறையில் ஸ்டைல்ஷீட், அசல் சர்வரில் படங்கள், எழுத்துரு சேவையிலிருந்து ஃபாண்ட்கள். அவை இல்லாதபோது பக்கம் இயல்பு எழுத்துருவில் ஸ்டைல் இல்லாத உரையாக மாறும். Chrome அல்லது Edge-இல் Webpage, Single File ஆகச் சேமித்தால் ஸ்டைல்களையும் படங்களையும் சேர்த்து வைக்கும் .mhtml கோப்பு கிடைக்கும்; பதிவேற்ற இதுவே மிகநம்பகமானது.

வெப் ஃபாண்ட்களுக்கும் இதே விதி. @font-face மூலம் அறிவித்த எழுத்துரு, அதன் கோப்பை அணுக முடிந்தால் மட்டுமே ஏற்றப்படும்; உங்கள் கணினியில் மட்டுமே உள்ள எழுத்துரு ஒத்த வேறொன்றால் மாற்றப்படும். சரியான எழுத்தமைப்பு முக்கியமெனில், எழுத்துருவை உட்பொதியுங்கள் அல்லது அனுப்பும் முன் முடிவைச் சரிபாருங்கள்.

நிலையான அகலம் இருப்பதால், அறிக்கையின் வாராந்திரப் படங்களை அருகருகே ஒப்பிடவும் முடியும். அச்சிடுவதற்காக முடிவு தேர்ந்தெடுக்கக்கூடிய உரையாகவே இருக்க வேண்டுமானால், அதற்குப் பதிலாக HTML to PDF வடிவத்தைப் பயன்படுத்துங்கள்.

HTML to PNG கேள்விகள்

என் உலாவியில் எடுக்கும் ஸ்கிரீன்ஷாட்டை விட HTML-ஐ PNG ஆக மாற்றுவது சிறந்ததா?

முழுப்பக்கப் பிடிப்புக் கருவியைப் பயன்படுத்தாவிட்டால், உலாவி ஸ்கிரீன்ஷாட் உங்கள் திரையில் பொருந்துவதை மட்டுமே எடுக்கும்; அதன் அகலம் உங்கள் சாளரத்தின் அளவைப் பொறுத்தது. இங்கே அகலம் நீங்கள் அமைக்கும் எண் என்பதால், வாரங்கள் இடைவெளியில் எடுத்த இரண்டு படங்களும் சரியாகப் பொருந்தும்; முதல் வரி முதல் அடிக்குறிப்பு வரை முழுப் பக்கமும் சேரும்.

அதே பக்கத்தின் JPG-ஐ விட PNG ஏன் பல மடங்கு பெரியதாக உள்ளது?

PNG ஒவ்வொரு பிக்சலையும் இழப்பின்றிச் சேமிக்கும். உரையும் ஒரே நிறப் பகுதிகளும் இதில் நன்றாகச் சுருங்கும்; ஆனால் போட்டோக்கள், கிரேடியன்ட்கள், வீடியோ போஸ்டர்கள் சுருங்காது, எனவே போட்டோ அதிகமுள்ள லேண்டிங் பக்கம் பெரிய PNG ஆகலாம். அத்தகைய பக்கங்களுக்கு HTML to JPG இலகுவான தேர்வு; கோட் மாதிரிகள், விளக்கப்படங்கள், UI ஆகியவற்றுக்கு மங்கலை ஏற்கும் அளவுக்குப் பலன் இருக்காது.

PNG-க்கு வெள்ளைக்குப் பதிலாக வெளிப்படையான (transparent) பின்னணி இருக்க முடியுமா?

ஆம். வெளிப்படையான பின்னணி என்பதை இயக்குங்கள். பக்கமே பின்னணி நிறத்தை அமைக்காத இடங்களில் மட்டுமே அது தெரியும்; எனவே வெள்ளை body நிறம் கொண்ட தளம் வெள்ளையாகவே வரும். தனி HTML கோப்பாக உருவாக்கிய ஒரு கூறு அல்லது பேட்ஜுக்கு இது சிறப்பாக வேலை செய்யும்.

இந்த மாற்றி பக்கத்தில் உள்ள JavaScript-ஐ இயக்குமா?

பக்கம் திறக்கும்போது ஸ்கிரிப்ட் உருவாக்கும் உள்ளடக்கம் தோன்றலாம்; ஆனால் கிளிக், ஸ்க்ரோல் அல்லது லாகின் வரை காத்திருக்கும் எதுவும் வராது. தொடர்புக்குப் பிறகு மட்டுமே விளக்கப்படம் அல்லது அட்டவணை உருவாகுமானால், பக்கத்தை உலாவியில் திறந்து முழுமையாக ஏற்றி, ஒரே கோப்பாகச் சேமித்து, பிறகு பதிவேற்றுங்கள்.

நீண்ட பக்கத்தின் மேல் பகுதியை மட்டும் படமாக்குவது எப்படி?

படங்கள் என்பதை ஒரு பக்கத்துக்கு ஒன்று என மாற்றி, பக்கங்கள் என்பதை முதல் பக்கம் என அமையுங்கள். முழு நீளத்துக்குப் பதிலாக முதல் பக்க அளவிலான பகுதி கிடைக்கும். பின்னர் சரியான சட்டத்துக்கு வெட்ட படத்தை க்ராப் செய்ய கருவியைப் பயன்படுத்துங்கள்.