ปัจจุบันมีกิจกรรมการดำเนินการบัญชีสาธารณะ WeChat มากมาย และมีความจำเป็นต้องสร้างรูปภาพหลังจากสร้างรูปภาพแล้ว ก็สามารถส่งให้เพื่อนและเผยแพร่ใน Moments ซึ่งเอื้อต่อการโปรโมตผลิตภัณฑ์!
1. คุณสามารถใช้ Canvas เพื่อสร้างภาพได้ แต่เนื่องจากมีไลบรารีโอเพ่นซอร์สชื่อ html2canvas อยู่แล้ว ฉันจึงไม่ได้เขียนมันเองเพื่อประหยัดเวลา
ที่อยู่ GitHub:html2canvas
หยุดเที่ยวเตร่ มาดูสิ่งต่าง ๆ ก่อน! - -
การสาธิตสด
/** * รับอัตราส่วนพิกเซลตาม window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio; } return 1; value to เป็นจำนวนเต็ม*/ function parseValue(value) { return parseInt(value, 10); Draw canvas */ async function DrawCanvas (selector) { // รับโหนด DOM ที่คุณต้องการแปลง const dom = document.querySelector(selector); const box = window.getComputedStyle(dom); โหนด DOM const width = parseValue(box.width); const height = parseValue(box.height); // รับอัตราส่วนพิกเซล const scaleBy = DPR(); สร้างองค์ประกอบผ้าใบที่กำหนดเอง var canvas = document.createElement('canvas'); // ตั้งค่าความกว้างและความสูงของแอตทริบิวต์องค์ประกอบผ้าใบเป็นความกว้างและความสูงของโหนด DOM * อัตราส่วนพิกเซล canvas.width = ความกว้าง * scaleBy = ความสูง * scaleBy; // ตั้งค่าความกว้างและความสูงของ canvas css เป็น DOM node width and height canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; // รับแปรง const context = canvas.getContext('2d'); // ขยายเนื้อหาการวาดทั้งหมดตามอัตราส่วนพิกเซล context.scale(scaleBy, scaleBy); ให้ x = ความกว้าง; = ความสูง; กลับรอ html2canvas(dom, {canvas}).then(function () { ConvertCanvasToImage(canvas, x,y) }) } /** * แปลงรูปภาพเป็นรูปแบบ base64*/ ฟังก์ชั่น ConvertCanvasToImage(canvas, x, y) { la image = new Image(); la _container = document.getElementsByClassName('container')[0]; ) [0]; image.width = x; image.height = y; canvas.toDataURL(image/png); _body.removeChild(_container); document.body.appendChild(รูปภาพ);2. เนื่องจากโทรศัพท์มือถือในปัจจุบันล้วนมีหน้าจอความละเอียดสูง ดังนั้นภาพเบลอจึงจะปรากฏขึ้นหากคุณไม่ดำเนินการใดๆ เหตุใดจึงเกิดภาพเบลอ สิ่งนี้เกี่ยวข้องกับอัตราส่วนพิกเซลของอุปกรณ์ devicePixelRatio js จัดเตรียม window.devicePixelRatio เพื่อรับอัตราส่วนพิกเซลของอุปกรณ์
ฟังก์ชัน DPR() { ถ้า (window.devicePixelRatio && window.devicePixelRatio > 1) { กลับ window.devicePixelRatio } กลับ 1;ฟังก์ชั่น DPR นี้คือการได้รับอัตราส่วนพิกเซลของอุปกรณ์ แล้วเราควรทำอย่างไรหลังจากได้รับอัตราส่วนพิกเซลแล้ว?
var canvas = document.createElement('canvas'); // ตั้งค่าความกว้างและความสูงของแอตทริบิวต์องค์ประกอบผ้าใบเป็นความกว้างและความสูงของโหนด DOM * อัตราส่วนพิกเซล canvas.width = ความกว้าง * scaleBy; canvas.height = ความสูง * scaleBy; canvas ความกว้างและความสูงของโหนด DOM คือ canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; รับแปรง const context = canvas.getContext('2d'); // ขยายเนื้อหาการวาดภาพทั้งหมดตามอัตราส่วนพิกเซล context.scale(scaleBy, scaleBy);3. หลังจากได้รับอัตราส่วนพิกเซลของอุปกรณ์แล้ว ให้คูณ canvass.width และ canvas.height ด้วยอัตราส่วนพิกเซลของอุปกรณ์ ซึ่งเป็นขนาดตาม ในขณะนี้ ให้ตั้งค่า canvas.style.width และ canvas.style.height เป็นความกว้างและความสูงของ โดม ลองคิดดูสิ ทำไมคุณถึงเขียนเรื่องนี้? สุดท้ายนี้ เมื่อวาดภาพ เนื้อหาที่วาดจะถูกขยายตามอัตราส่วนพิกเซล
เช่น ความกว้างและความสูงของอุปกรณ์ iPhone 6S คือ 375 ดังนั้นหากคุณวาดแบบตัวต่อตัว มันจะเบลอบนหน้าจอที่มีความคมชัดสูง เพียงแค่ดูภาพแล้วเล่าเรื่อง 6S DPR=2
6บวก DPR=3
4. สุดท้าย ให้เรียก canvas.toDataURL(image/png) กำหนดค่าให้กับ image.src เนื่องจากรูปภาพไม่สามารถบันทึกใน WeChat ได้ คุณจึงสร้างได้เฉพาะไฟล์รูปภาพและเรียกใช้ฟังก์ชันกดแบบยาวของ WeChat เพื่อบันทึกรูปภาพลงในอัลบั้ม ดังแสดงในรูป:
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network