Page 1 of 13
1 2 3 13

สรุปปัญหา html2canvas กับข้อความภาษาไทย

สรุปปัญหา-html2canvas-กับข้อความภาษาไทย

html2canvas คือ html5 javascript library ที่ถูกพัฒนาขึ้นมาเพื่อใช้งานสำหรับการแปลงข้อมูลในภาษา html ให้กลายเป็นข้อมูลรูปภาพ png, jpg, pdf ตัว library สามารถทำงานได้อย่างดีกับข้อความในภาษาอังกฤษเมื่อต้องแปลงข้อมูลใน html div เป็นรูปภาพ แต่จะมีปัญหากับภาษาแบบ Non-Latin เช่น ภาษาไทย จีน ญี่ปุ่น เป็นต้น ปัญหาที่เกิดขึ้นมีอะไรบ้าง จากที่ได้ทดสอบ สรุปไว้ดังนี้ครับ html2canvas ปัญหาการแสดงผลภาษาไทย สระเพี้ยน ข้อความซ้อนทับกัน แสดงสระภาษาไทยไม่สมบูรณ์ ทั้ง Safari และ Google Chrome html2canvas v 0.5.0-beta4 text-align: justify  contenteditable = false ปัญหาสระเพี้ยนด้านบนเป็น Bug ของ html2canvas เวอร์ชั่นใหม่ ๆ พอจะแก้ปัญหาเรื่องสระได้ด้วยการใช้เวอร์ชั่นที่ต่ำกว่า html2canvas v 0.4.1 […]

อ่านเพิ่มเติม


รวมฟรี สุดยอด WordPress Theme ปี 2020

รวมฟรี-สุดยอด-WordPress-Theme-ปี-2020

เราได้รวบรวม WordPress Theme ที่ได้รับความนิยมที่สุดในครึ่งปี 2020 โดยคิดจากยอดดาวน์โหลดและยอดรีวิว และเลือกโดยคัดธีมที่มี Performance ดีที่สุด โดยใช้ Pingdom Tool ในการทดสอบ และด้านล่าง คือรายการ WordPress Theme ที่เราได้คัดสรรมาไว้ให้ใช้งานกัน 1. Astra เป็นหนึ่งในธีมยอดนิยมจากเว็บไซต์ wordpress.org เป็นธีมสไตล์มินิมอล เรียบง่ายแต่ทรงประสิทธิภาพ มาพร้อมเครื่องมือที่ใช้ในการสร้างมาเพจอย่างครบถ้วน เมื่อใช้ธีมนี้ทำให้สามารถสร้างหน้าเว็บไซต์ได้อย่างรวดเร็ว เพราะมีเครื่องมือที่ติดมากับธีมค่อนข้างครบ Download Astra Theme 2. OceanWP เป็นธีมที่มีคุณสมบัติคล้ายกับธีม astra เรียบง่าย สวยหรู ทรงประสิทธิภาพ และถ้าใครมีแพลนที่จะติดตั้ง woocommerce ในอนาคต OceanWP น่าจะทำให้การใช้งานง่ายขึ้นอีกเยอะเพราะโครงสร้างธีมถูกพัฒนามาให้รองรับการใช้งานระบบ ecommerce อยู่แล้ว Download OceanWP Theme 3. Sydney ธีมหรูหราหมาเห่า เป็นธีมที่ถูกแนะนำโดยทีมผู้พัฒนา Elementor ใช้งาน Google Font […]

อ่านเพิ่มเติม


html5 canvas อัพโหลด และ ลบพื้นหลังของรูป

html5-canvas-อัพโหลด-และ-ลบพื้นหลังของรูป

canvas คือ tags ที่เกิดขึ้นใหม่ใน html เวอร์ชั่น 5 หรือที่เรามักเรียกติดปากว่า html5 ความสามารถของ html5 canvas คือ เราจะสามารถจัดการกับวัตถุที่ถูกวาดลงบน canvas ได้ละเอียดมากขึ้น มากกว่า html element ทั่วไป canvas จึงเหมาะกับการพัฒนา Game, Animation Frame By Frame, Web Application ในบทความความจะมาแนะนำการอัพโหลดรูปจากเครื่องเรา ไปแสดงผลบน canvas จากนั้นใช้ความสามารถของ canvas context2d ในการลบพื้นหลังของรูป อัพโหลดรูปแสดงผลบน Canvas เริ่มต้นสร้าง canvas กำหนดความกว้างและความสูง และสร้าง input สำหรับ upload ไฟล์

ในส่วนของ javascript เรียกใช้งาน canvas และใช้ getContext2D สำหรับ Context2D […]

อ่านเพิ่มเติม


Photoshop ออนไลน์ ทำงานได้ทุกที่ด้วย photopea.com

Photoshop-ออนไลน์-ทำงานได้ทุกที่ด้วย-photopea-2

โดยปกติถ้านึกถึงโปรแกรมที่ใช้สำหรับงานออกแบบในสายงานต่าง ๆ เราจะต้องนึกถึงโปรแกรมอย่าง Adobe Photoshop, Sketch, GIMP, Adobe XD, CorelDraw เป็นอันดับต้น ๆ เพราะน่าจะเป็นซอฟต์แวร์ที่ Graphic Designer รวมถึงคนทั่วไป ใช้งาน และ รู้จักคุ้นเคยกันเป็นอย่างดี ยังมีอีกโปรแกรมหนึ่ง ที่เราสามารถใช้ทำงานออกแบบที่ไหนก็ได้ โดยไม่ต้องติดตั้งโปรแกรม เพียงแค่มี Internet เพราะมันคือ photopea.com โปรแกรมสำหรับงานดีไซน์ ที่มาในรูปแบบเว็บไซต์ เราสามารถใช้งานได้ผ่าน Browser โดยการเข้าเว็บไซต์ https://www.photopea.com ตัวโปรแกรมออกแบบมาให้หน้าตา และเครื่องมือต่าง ๆ คล้าย ๆ กับ Adobe Photoshop ทำให้สามารถใช้งานได้ง่าย ใช้เวลาในการศึกษาการใช้งานเครื่องมือต่าง ๆ ไม่นาน รองรับไฟล์หลากหลายนามสกุล เราสามารถบันทึกหรือนำเข้าไฟล์นามสกุลออกแบบหลัก ๆ ได้ค่อนข้างเยอะ เช่น PSD, XCF, XD, CDR หรือ Save […]

อ่านเพิ่มเติม


PHP ติดตั้งและใช้งาน Tesseract OCR แปลงรูปภาพเป็นข้อความภาษาไทย

PHP-ติดตั้งและใช้งาน Tesseract-OCR

Tesseract คือ Engine ที่ใช้สำหรับกระบวนการแปลงสื่อสิ่งพิมพ์ เช่นกระดาษ นิตยาสาร สัญญา หรือข้อมูลอะไรก็ตามที่อยู่ในรูปของเอกสารกระดาษ ให้กลายเป็นเป็นข้อความ เรียกกระบวนการนี้ว่า Optical Character Recognition หรือเรียกสั้น ๆ ว่า OCR Tesseract Engine สามารถแปลงข้อมูลในรูปภาพไปเป็นตัวอักษรภาษาต่าง ๆ ทั่วโลก เดิมที่ถูกพัฒนาโดย Hewlett-Packard ( HP ) และเปิดเป็นโอเพ่นซอร์สในปี 2005 จากนั้นในปี 2006 ทีมพัฒนาของ Google ได้นำมาพัฒนาต่อยอดให้มีความสามารถมากขึ้น สามารถเข้าดูได้ที่ https://opensource.google/projects/tesseract ในบทความนี้จะมาแนะนำการติดตั้งและใช้งาน Tesseract OCR ในภาษา PHP บนระบบปฏิบัติการ Mac OS นะครับ สำหรับการทดสอบ เบื้องต้นให้เตรียม Environment ตามด้านล่างนะครับ ติดตั้ง homebrew package manager ติดตั้ง PHP […]

อ่านเพิ่มเติม


เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย Google Fonts

เทคนิคเพิ่มความเร็วเว็บไซต์

เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย Google Fonts เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed Insight ตอน : Google Fonts ทดสอบโดยใช้ Google Page Speed Insignt คะแนนเพิ่มจาก 78% เป็น 93% ปัจจุบัน Google Fonts มีฟอนต์รองรับภาษาไทยที่สวยงาม ให้เราสามารถนำมาใช้ในการพัฒนาเว็บไซต์หลากหลายฟอนต์ด้วยกัน แต่ปัญหาอย่างหนึ่งที่เรามักจะเจอเมื่อนำ Google Fonts มาใช้ทำเว็บไซต์คือ เมื่อใช้วิธี import หรือ Load font จาก fonts.googleapis.com มาใช้งาน จะทำให้เว็บไซต์โหลดช้าลงอย่างเห็นได้ชัด เหตุผลก็เพราะว่า fonts.googleapis.com นั้นเป็น Server กลางที่อนุญาติให้นักพัฒนาสามารถโหลดข้อมูลฟอนต์ไปใช้งานได้ ยิ่งมีปริมาณคนใช้งานมากขึ้น ก็จะยิ่งทำให้การโหลดใช้เวลามากขึ้นตามไปด้วย วิธีแก้ปัญหาก็คือเปลี่ยนการโหลดจาก fonts.googleapis.com มาเป็นโหลดจาก Server หรือ […]

อ่านเพิ่มเติม


วิธี Update ระบบปฏิบัติการ Android เครื่อง Samsung ให้เป็นเวอร์ชั่นล่าสุด

ไปที่แอพ การตั้งค่า หรือถ้าเครื่องเราตั้งค่าเป็นภาษาอังกฤษ Setting ที่ติดมากับเครื่องที่ใช้ระบบปฏิบัติการ Android เลื่อนหาตัวเลือกที่ชื่อว่า อัพเดทซอฟต์แวร์ หรือภาษาอังกฤษ Software Update คลิกที่ตัวเลือก ดาวน์โหลดการอัพเดทด้วยตัวเอง หรือภาษาอังกฤษ Download Updates Manually ระบบจะใช้เวลาตรวจสอบซักพัก จากนั้นคลิกที่ ติดตั้งตอนนี้ ระบบจะทำการตรวจสอบและ Restart เครื่อง เพื่อเข้าสู่ขั้นตอนการดาวน์โหลดและติดตั้งซอฟต์แวร์ที่จำเป็น Android OS เวอร์ชั่นล่าสุด รอให้ระบบทำงานด้วยตัวเองจนกว่าจะเปิดเครื่อง หลังจากเปิดเครื่องมา ระบบจะยังมีการดาวน์โหลดข้อมูลอยู่ กรณีที่เราไม่ได้อัพเดทนานมากแล้ว ระบบจะให้เราอัพเดทซอฟต์แวร์ที่จำเป็นมากหน่อย ให้เราทำตามขั้นก่อนหน้านี้ซ้ำ จนกว่าจะไม่มีการให้อัพเดทใด ๆ จากรูปตัวอย่าง ผู้เขียนใช้เครื่อง Galaxy S9 เวอร์ชั่นของ Android ในเครื่องคือ Android 8 ปันจุบันคือ Android 10 เลยใช้เวลาอัพเดทค่อนข้างนา ตรวจสอบข้อมูลระบบปฏิบัติการ Android ว่าเป็นเวอร์ชั่นล่าสุดแล้วหรือยังให้ไปที่ การตั้งค่า -> เกี่ยวกับโทรศัพท์

อ่านเพิ่มเติม


Web Inspect วิธีตรวจสอบเว็บไซต์ ( Debug ) บน iOS Real Device

วิธีการตรวจสอบเว็บไซต์ หาปัญหาที่ทำให้เว็บไซต์ไม่สามารถทำงานได้ หรือที่เรียกว่าการ debug โดยส่วนใหญ่แล้วในขั้นตอนการพัฒนาเราใช้วิธีการ Web Inspect ผ่าน Simulator ของแต่ละ Device เช่นถ้าต้องการทดสอบการแสดงผลบน iPhone 8 หรือ iPad ก็แค่คลิกขวา เลือก inspect บน Google Chrome หรือเลือก Inspect Element บน Safari จากนั้นก็ดูที่ Tab Console สำหรับ Error หรือ Warning ส่วนของ Frontend กรณีต้องการดูการรับส่งข้อมูลระหว่าง Sever ก็เลือก Tab Network ระบบจะสามารถให้ข้อมูลปัญหาต่าง ๆ ที่อาจจะทำให้เว็บไซต์ใช้งานไม่ได้ Browser ส่วนใหญ่รองรับการ Debug แบบนี้อยู่แล้ว ใช้งานง่าย ตรวจสอบง่าย แต่ปัญหาอีกอย่างหนึ่งที่นักพัฒนามักเจอคือการทำงานบน Simulator กับ Device จริง […]

อ่านเพิ่มเติม


Page 1 of 13
1 2 3 13