วิธีทำ jpg จาก svg. แปลง svg เป็น PNG === บริการออนไลน์ ===

บางครั้งจำเป็นต้องบันทึก svg เป็น png โดยใช้เบราว์เซอร์ น่าเสียดายที่เบราว์เซอร์ไม่มี API วิเศษที่จะช่วยให้สามารถทำได้โดยไม่ต้องแฮ็กต่างๆ จะทำอย่างไรถ้าคุณยังต้องการบรรลุสิ่งที่คุณต้องการ?

แนวคิดแรกที่เข้ามาในใจของฉันคือทำสิ่งนี้ผ่าน Canvas ซึ่งมีวิธีการ toDataURL("image/png");
ดังนั้นฉันจึงเขียนสคริปต์ง่ายๆ: jsfiddle, github:

Var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = "data:image/svg+xml;base64," + btoa(html); var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); canvas.setAttribute("ความกว้าง", 526); canvas.setAttribute("ความสูง", 233); var image = รูปภาพใหม่; image.src = imgsrc; image.onload = function () ( context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = " บันทึก"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(canvas); );

สาระสำคัญของสคริปต์นั้นเรียบง่าย: ฉันแปลง svg เป็น dataUri โหลดผ่านรูปภาพ วาดภาพบนผืนผ้าใบ และแปลงเป็น PNG ดูเหมือนบรรลุเป้าหมายแล้วเราก็สบายใจได้ วิธีนี้ใช้ได้กับ Firefox และ Chrome แต่เมื่อฉันเปิดมันในเบราว์เซอร์ที่ทุกคนชื่นชอบ นั่นคือ IE ฉันได้รับข้อผิดพลาดที่ยอดเยี่ยมนี้:

ความจริงก็คือ IE คิดว่ารูปภาพถูกโหลดจากโฮสต์อื่น ขออภัย คุณจะไม่สามารถตั้งค่าต้นทางสำหรับ dataUri ได้ จริงๆ แล้ว คุณสามารถดูคำอธิบายกฎได้ที่นี่: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements แน่นอนว่าเป็นไปได้ที่จะพร็อกซี svg ผ่านเซิร์ฟเวอร์ จากนั้นทุกอย่างก็ใช้งานได้ แต่ฉันต้องการโซลูชันฝั่งไคลเอ็นต์ล้วนๆ

แล้วฉันก็จำไลบรารี canvg ที่ยอดเยี่ยมได้ เมื่อใช้ไลบรารีนี้ ฉันวาด svg บนผืนผ้าใบ จากนั้นดำเนินการตามตัวเลือกแรก: take toDataURL("image/png") ผลลัพธ์ที่ได้คือโค้ดง่ายๆ นี้: github:

วาร์ svg = document.querySelector("svg"); var canvas = document.createElement("ผ้าใบ"); canvas.height = svg.getAttribute("ความสูง"); canvas.width = svg.getAttribute("ความกว้าง"); canvg (ผ้าใบ svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL("รูปภาพ/png"); var data = atob(dataURL.substring("data:image/png;base64,".length)), asArray = new Uint8Array(data.length); สำหรับ (var i = 0, len = data.length; i< len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");

เป็นเรื่องที่ควรกล่าวถึงที่นี่ว่าฉันยังใช้ไลบรารี FileSaver เพื่อเปิดกล่องโต้ตอบบันทึกขึ้นมา
เพียงเท่านี้เราก็บรรลุผลตามที่ต้องการแล้ว

สิ่งหนึ่งที่ควรสังเกตคือฉันสงสัยเกี่ยวกับการบันทึก svg เป็น png เมื่อฉันเขียนปลั๊กอินส่งออก tauCharts เนื่องจากสไตล์ใน svg ถูกตั้งค่าจากไฟล์ภายนอก เพื่อให้เกิดความคล้ายคลึงกันสูงสุดกับ svg ดั้งเดิม ฉันจึงแทรกสไตล์อินไลน์ลงใน svg และเราได้ผลลัพธ์นี้

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับคุณและประหยัดเวลาของคุณ

วิธีที่ง่ายที่สุดในการติดตามอาร์ตเวิร์คคือการเปิดหรือวางไฟล์ใน Adobe Illustrator แล้วติดตามโดยอัตโนมัติโดยใช้คำสั่ง Trace Image: Illustrator Help การใช้เครื่องมือติดตามรูปภาพ - CS6

* ง่ายกว่านี้อีก):
เมื่อใช้ซอฟต์แวร์ รูปภาพ/รูปภาพ/ภาพวาด/ภาพถ่ายที่คุณระบุจะถูกแปลงเป็นเวกเตอร์ในราคา 1(!) ยูโร ->รูปภาพเป็นเวกเตอร์

=== บริการออนไลน์ ===

  • ภาพแรกจ่ายแล้ว แม้ว่าจะสามารถสร้างภาพสองภาพเพื่อเริ่มต้นได้ฟรีก็ตาม

ในภาษาอังกฤษแม้จะเข้าใจได้ไม่ยากก็ตาม มีสองทางเลือกในการใช้งาน - ออนไลน์หรือซื้อโปรแกรมคอมพิวเตอร์ ราคาสำหรับการใช้งานออนไลน์ (ไม่จำกัด) คือ 7.95 ดอลลาร์ โปรแกรมเดสก์ท็อปมีราคา 295.00 ดอลลาร์ สามารถสั่งการติดตามด้วยตนเองได้
แน่นอนว่าคุณสามารถหาอันที่ถูกกว่าได้จากพอร์ทัลอิสระ แต่ตัวเลือกนั้นขึ้นอยู่กับทุกคน

ความแม่นยำ

ด้านบนคือภาพเปรียบเทียบ Vector Magic, Adobe Live Trace (CS6) และ Corel
คอเรล พาวเวอร์เทรซ (X6) ให้ความสนใจกับการประมวลผลรูปร่างอย่างระมัดระวังโดย Vector

ใช้งานง่าย

คุณไม่จำเป็นต้องติดตั้งและทราบตัวเลือกและการตั้งค่ามากมายเพื่อให้ได้ผลลัพธ์ที่ยอมรับได้

คุณเพียงแค่ต้องตอบคำถามง่ายๆ สองสามข้อเท่านั้น หากผลลัพธ์ไม่เป็นที่น่าพอใจ เรามีคู่มือ “การแก้ไขปัญหา” ให้คุณค้นหาคำตอบและแก้ไขปัญหาได้อย่างง่ายดาย

คุณสามารถลองซ้ำแล้วซ้ำอีกจนกว่าคุณจะได้ผลลัพธ์ที่น่าพอใจ

โดยทั่วไป คุณสามารถถ่ายโอนงานนี้ไปยัง Vector และทำงานที่สร้างสรรค์มากขึ้นได้

แปลยังหลวมๆ แต่ความหมายประมาณนี้ครับ

แหล่งที่มาของรูปภาพในรูปแบบ JPG, GIF, PNG, BMP และ TIFF ผลลัพธ์คือสามตัวเลือกคุณภาพและสามรูปแบบ: EPS, SVG และ PNG เมื่อเสร็จสิ้นแล้ว คุณสามารถทำซ้ำด้วยคุณภาพที่ต้องการและการแก้ไขบางส่วนได้

  • ต่อไปโดยสมบูรณ์ ฟรี .

เป็นภาษาอังกฤษล้วนแต่ชัดเจนในการใช้งาน การตั้งค่าและการทำงานด้วยตนเองอีกเล็กน้อย แต่ก็คุ้มค่า


รูปแบบแหล่งที่มาที่รองรับ:
  • PNG กราฟิกเครือข่ายแบบพกพา
  • ภาพ TGA Truevision Targa
  • รูปแบบบิตแมปแบบพกพา PBM
  • รูปแบบแผนที่ใดก็ได้ของ PNM Portable
  • รูปแบบแผนที่สีเทา PGM Portable
  • รูปแบบ pixmap ของ PPM แบบพกพา
  • ภาพบิตแมป BMP Microsoft Windows

รูปแบบเอาต์พุต:
  • กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ svg
  • eps แบบห่อหุ้ม PostScript
  • ai Adobe Illustrator
  • รูปแบบ dxf DXF (ไม่มีเส้นโค้ง)
  • p2e ptoedit รูปแบบส่วนหน้า
  • เอสเค สเก็ตช์
  • รูปที่ XFIG 3.2
  • emf รูปแบบ Metafile ที่ปรับปรุงแล้ว
  • mif Frame Maker รูปแบบ MIF
  • เป็นไฟล์ Elastic Reality Shape
  • รูปแบบ epd epd
  • pdf รูปแบบ PDF
  • Metafile กราฟิกคอมพิวเตอร์ cgm
  • dr2d IFF DR2D? รูปแบบ
  • ให้คุณแปลงรูปภาพเป็น . คุณสามารถอัปโหลดไฟล์หรือระบุลิงก์ไปยังรูปภาพได้ นอกจากนี้ยังสามารถใช้เอฟเฟ็กต์ดิจิทัลได้อีกด้วย

ในกรณีของการแปลงภาพแรสเตอร์ (PNG หรือ JPG) เป็นรูปแบบ SVG รูปร่างและวัตถุจะถูกแปลงเป็นกราฟิกเวกเตอร์ขาวดำที่ได้รับการปรับขนาดโดยไม่สูญเสียคุณภาพ ภาพดังกล่าวสามารถระบายสีได้โดยใช้โปรแกรมฟรีสำหรับการทำงานกับภาพเวกเตอร์ (ฯลฯ ) ในกรณีส่วนใหญ่ช่างภาพจะไม่บรรลุผลตามที่ต้องการเมื่อแปลงภาพแรสเตอร์เป็นรูปแบบ SVG

หากคุณกำลังแปลงภาพเวกเตอร์ใดๆ (เช่น รูปแบบ eps หรือ ai) เป็นรูปแบบ SVG โปรแกรมแปลงไฟล์จะพยายามเก็บข้อมูลเวกเตอร์และสีทั้งหมดไว้ และจะตรวจสอบให้แน่ใจด้วยว่าไฟล์ทั้งสองมีความคล้ายคลึงกันมากที่สุด

ตัวแปลงรูปแบบ Scalable Vector Graphics (SVG) ช่วยให้คุณสามารถแปลงไฟล์ได้มากกว่า 130 รูปแบบ ทิศทางการแปลง:

3FR เป็น SVG, AFF เป็น SVG, AI เป็น SVG, ANI เป็น SVG, ART เป็น SVG, ARW เป็น SVG, AVI เป็น SVG, AVS เป็น SVG, BMP เป็น SVG, CDR เป็น SVG, CGM เป็น SVG, CIN เป็น SVG, CMYK เป็น SVG, CMYKA ถึง SVG, CR2 ถึง SVG, CRW ถึง SVG, CUR ถึง SVG, ตัดเป็น SVG, DCM ถึง SVG, DCR ถึง SVG, DCX ถึง SVG, DDS ถึง SVG, DFONT ถึง SVG, DIA ถึง SVG, DNG ถึง SVG, DPX เป็น SVG, DXF เป็น SVG, EPDF เป็น SVG, EPI เป็น SVG, EPS เป็น SVG, EPSF เป็น SVG, EPSI เป็น SVG, EPT เป็น SVG, EPT2 เป็น SVG, EPT3 เป็น SVG, ERF เป็น SVG, EXR เป็น SVG, แฟกซ์เป็น SVG, FIG ถึง SVG, เหมาะกับ SVG, FPX ถึง SVG, FRACTAL ถึง SVG, FTS ถึง SVG, G3 ถึง SVG, GIF ถึง SVG, GIF87 ถึง SVG, สีเทาถึง SVG, GRB ถึง SVG, HDR ถึง SVG, HRZ ถึง SVG, ICB เป็น SVG, ICO เป็น SVG, ICON เป็น SVG, IPL เป็น SVG, JBG เป็น SVG, JBIG เป็น SVG, JNG เป็น SVG, JP2 เป็น SVG, JPC เป็น SVG, JPE เป็น SVG, JPEG เป็น SVG, JPG เป็น SVG, JPX เป็น SVG, K25 ถึง SVG, KDC ถึง SVG, M2V ถึง SVG, M4V ถึง SVG, MAT ถึง SVG, MIFF ถึง SVG, MNG ถึง SVG, MONO ถึง SVG, MOV ถึง SVG, MP4 ถึง SVG, MPC ถึง SVG, MPEG เป็น SVG, MPG เป็น SVG, MRW เป็น SVG, MSL เป็น SVG, MSVG เป็น SVG, MTV เป็น SVG, MVG เป็น SVG, NEF เป็น SVG, NRW เป็น SVG, ORF เป็น SVG, OTB เป็น SVG, OTF เป็น SVG, PAL เป็น SVG, PALM เป็น SVG, PAM เป็น SVG, PBM เป็น SVG, PCD เป็น SVG, PCDS เป็น SVG, PCL เป็น SVG, PCT เป็น SVG, PCX เป็น SVG, PDB เป็น SVG, PDF เป็น SVG, PDFA เป็น SVG, PEF เป็น SVG, PES เป็น SVG, PFA เป็น SVG, PFB เป็น SVG, PFM เป็น SVG, PGM เป็น SVG, PICON เป็น SVG, PICT เป็น SVG, PIX เป็น SVG, PJPEG เป็น SVG, PLASMA เป็น SVG, PNG เป็น SVG, PNG24 เป็น SVG, PNG32 เป็น SVG, PNG8 ถึง SVG, PNM เป็น SVG, PPM เป็น SVG, PS เป็น SVG, PSD เป็น SVG, PTIF เป็น SVG, PWP เป็น SVG, RAF เป็น SVG, RAS เป็น SVG, RGB เป็น SVG, RGBA เป็น SVG, RLA เป็น SVG, RLE เป็น SVG, SCT ถึง SVG, SFW ถึง SVG, SGI ถึง SVG, SK ถึง SVG, SK1 ถึง SVG, SR2 ถึง SVG, SRF ถึง SVG, SUN ถึง SVG, SVG ถึง SVG, SVGZ ถึง SVG, TGA ถึง SVG, TIF ถึง SVG, TIFF ถึง SVG, TIM เป็น SVG, TTC เป็น SVG, TTF เป็น SVG, TXT เป็น SVG, VDA เป็น SVG, VICAR เป็น SVG, VID เป็น SVG, VIFF เป็น SVG, VST เป็น SVG, WBMP เป็น SVG, WEBP เป็น SVG, WMF เป็น SVG, WMZ ถึง SVG, WPG ถึง SVG, X ถึง SVG, X3F ถึง SVG, XAML ถึง SVG, XBM ถึง SVG, XC ถึง SVG, XCF ถึง SVG, XFIG ถึง SVG, XPM ถึง SVG, XV ถึง SVG, XWD ถึง SVG, YCBCR ถึง SVG, YCBCRA ถึง SVG, YUV ถึง SVG

สร้างขึ้นบนโซลูชันแบบเปิด เช่น Autotrace, ImageMagick และส่วนประกอบกราฟิก Linux ต่างๆ

รูปแบบที่จะแปลง:

SVG - ไฟล์กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้
AI - ไฟล์ Adobe Illustrator (ตาม postscript)
CGM - ไฟล์ Metafile กราฟิกคอมพิวเตอร์
WMF - ไฟล์ Windows Metafile
SK - ไฟล์ Sketch/Skencil
PDF - รูปแบบเอกสารพกพา
กำไรต่อหุ้น - โพสต์สคริปต์
PLT - HPGL สำหรับการตัดไฟล์พล็อตเตอร์

และยัง: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D

ในโปรเจ็กต์หนึ่งไอคอนขนาดเล็กในรูปแบบ svg ปรากฏขึ้นใกล้กับเมนู และจำเป็นที่เมื่อคุณวางเคอร์เซอร์ไว้เหนือรายการเมนู ข้อความและไอคอนจะเปลี่ยนสี เพื่อไม่ให้สร้างรูปภาพจำนวนมาก จึงตัดสินใจแปล svg เป็นโค้ดและใช้ในรูปแบบ CSS

คำแนะนำสั้น ๆ เกี่ยวกับวิธีใช้ SVG ใน CSS

เราใช้โค้ดผลลัพธ์ในไฟล์ css ของเรา

เช่น ใช้ไอคอน Facebook (ไอคอนมาตรฐานที่มีการปรับเปลี่ยนเล็กน้อย)

บนเว็บไซต์ https://jakarchhibald.github.io/svgomg/ คลิก "เปิด SVG"หรือลากไอคอนไปไว้บนพื้นที่รับชม ที่มุมซ้ายบนให้คลิก "รหัส"ไฮไลต์โค้ดแล้วคลิก ไอคอนคัดลอกดังนั้นเราจะนำโค้ดของอิมเมจ SVG ของเราไปไว้ในบัฟเฟอร์

บางสิ่งเช่นนี้:

จากนั้นวางโค้ดผลลัพธ์ลงในหน้าต่างด้านบน คลิก Converte และรับโค้ดที่เสร็จสมบูรณ์ ภาพพื้นหลัง:

ภาพพื้นหลัง: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3e%3cpath fill-rule="evenodd" clip-rule="evenodd" fill="%23FFF" d="M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5 ชม. -4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h -3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");

คัดลอกและใช้ใน css ของคุณ

หากต้องการเปลี่ยนสี ให้เปลี่ยน fill="%23FFF" เพียงจำไว้ว่า %23 เป็นเครื่องหมาย # ปกติ นั่นคือ fill="%23000" เป็นสีดำปกติ (#000)

รูปภาพ SVG เป็นรูปแบบเวกเตอร์ที่สำคัญสำหรับเว็บไซต์รุ่นต่อไป และได้รับการบูรณาการอย่างสมบูรณ์กับมาตรฐานใหม่ของ HTML5 ด้วย Aurora SVG Viewer & Converter: คุณสามารถดูกราฟิก SVG และแปลงผลงานของคุณเป็นรูปแบบต่างๆ ได้อย่างง่ายดาย

การถือกำเนิดของ HTML5 ทำให้มีการใช้ภาพเวกเตอร์ในรูปแบบ SVG มากขึ้น หากคุณเป็นนักพัฒนาเว็บ ตอนนี้เป็นเวลาที่เหมาะสมที่สุดในการก้าวนำหน้าเกมและปรับแต่งขั้นตอนการทำงานของคุณด้วยทุกสิ่งที่คุณต้องการในการทำงานกับรูปภาพ HTML5 และ SVG ขั้นตอนแรกคือการคว้าสำเนาโปรโมชั่นซอฟต์แวร์ลดราคาวันนี้สำหรับผู้ใช้ Mac และ Windows!

โปรแกรมดูและแปลง Aurora SVGทำให้ง่ายต่อการจัดระเบียบ ดู และแปลงรูปภาพ SVG กับ โปรแกรมดูและแปลง Aurora SVGคุณจะเพลิดเพลินไปกับโหมดการแสดงภาพขนาดย่อที่สะดวกสบาย และมุมมองโฟลเดอร์ที่จดจำได้ทันที หากคุณต้องการแปลงรูปภาพ SVG เป็นรูปแบบอื่น โปรแกรมดูและแปลง Aurora SVGบันทึกวันด้วยการช่วยให้คุณสามารถบันทึกรูปภาพเป็นไฟล์ TIFF, PNG, JPB, BMP, GIF, TGA, XPM, PPM, XBM หรือแม้แต่ไฟล์รูปแบบ PDF ยิ่งไปกว่านั้น คุณสามารถแปลงไฟล์หลาย ๆ ไฟล์เป็นชุดได้!

แน่นอนว่าคุณสามารถควบคุมรายละเอียดได้อย่างเต็มที่เสมอ โปรแกรมดูและแปลง Aurora SVG- ปรับความละเอียดเอาต์พุต แปลงส่วนของรูปภาพ SVG และตั้งค่าคุณภาพการแปลง!

ภาพหน้าจอของ Windows: ภาพหน้าจอของ Mac:

คุณสมบัติโปรแกรมดูและแปลง Aurora SVG:

1.สนับสนุน ระบบปฏิบัติการ Windows และ MAC

2.ง่าย การเลือกโฟลเดอร์และ การแสดงภาพขนาดย่อโหมด.

3. ดูตัวอย่างรูปภาพ SVG หรือแปลงได้อย่างรวดเร็ว รองรับ SVG และ SVGZ.

4. ตัวแปลง SVG เป็นรูปแบบภาพหลายรูปแบบ ได้แก่ : tiff, PNG, jpg, bmp, gif, tga, xpm, ppm, xbm และ pdf.

5. การแปลงเป็นชุดสร้างรายการรูปภาพที่จะแปลง จากนั้นในการกวาดครั้งเดียวจะแปลงรูปภาพเหล่านั้นและบันทึกลงในโฟลเดอร์อื่น

6. ความละเอียดเอาต์พุตสามารถตั้งค่าได้อย่างง่ายดายด้วยความละเอียดการซูมฟรี เลือกและแปลงพื้นที่ใดๆ ของผืนผ้าใบ SVG

7. กำหนดการแปลงพื้นที่ใด ๆ ที่คุณเลือก: เลือกพื้นที่ของภาพ SVG และแปลง.

8.ชุดด่วนของ คุณภาพการแปลง.

9. ใช้ Windows หรือ Mac OS ที่คุณต้องการเพื่อดูตัวอย่าง SVG หรือภาพเคลื่อนไหวอย่างรวดเร็ว และแปลง SVG เป็นรูปแบบภาพหลายรูปแบบเป็นกลุ่ม ไปข้างหน้าให้มันลอง!

รางวัล

ความคิดเห็นของผู้ใช้:

ฉันอยากจะบอกคุณว่าฉันเพลิดเพลินกับซอฟต์แวร์ของคุณมากแค่ไหน ฉันซื้อเครื่องมือสร้างข้อความ 3D ตอนนี้ฉันซื้อเครื่องมือสร้างแอนิเมชัน 3D ทั้งสองโปรแกรมนี้จะทำให้โปรเจ็กต์วิดีโอของฉันโดดเด่นจริงๆ

---- จอห์น ฮาร์วัต (สหรัฐอเมริกา)


โปรแกรมนี้ดูมีประโยชน์มาก ฉันจะดาวน์โหลดและลองใช้อย่างแน่นอน Animation 3D ก็ดูมีประโยชน์มากเช่นกัน เป็นเรื่องที่น่าทึ่งมากที่มีการเปิดตัวซอฟต์แวร์ใน bitsdujour มากมายซึ่งฉันไม่เคยเจอมาก่อน

ฉันเพิ่งทดลองใช้ 3D Animation Maker เสร็จ ว้าว ประทับใจมาก! ฉันส่งออกตัวอย่างหนึ่งเป็น avi และพอใจกับคุณภาพมาก ขอบคุณสำหรับข้อตกลง การซื้อนี้ "ไม่ใช่เรื่องง่าย" หลังจากการทดลองใช้ ฉันจะพิจารณาการนำเสนอ 3D ในอนาคตอย่างแน่นอน

---- ดอน ก็อดดาร์ด (สหรัฐอเมริกา)

บทความที่เกี่ยวข้อง