ใช้ html2canvas เพื่อแปลงเพจให้เป็นรูปภาพและดาวน์โหลดโดยใช้ canvas2image

ก่อนหน้านี้ฉันพบวิธีการดาวน์โหลดบนอินเทอร์เน็ตโดยใช้แอตทริบิวต์การดาวน์โหลดของ <a> ซึ่งจริงๆ แล้วเป็นวิธีที่ง่ายและสะดวกมาก แต่วิธีนี้ไม่รองรับ IE ดังนั้นฉันจึงไม่มีทางเลือกนอกจากต้องหาวิธีอื่น

เวอร์ชันที่ใช้ในตัวอย่างนี้:

• [email protected]
• [email protected]

ติดตั้ง

 npm ติดตั้ง html2canvas canvas2image --save

แนะนำ

 นำเข้า html2canvas จาก 'html2canvas';require('./canvas2image.js');

ต้องแก้ไข canvas2image.js เพื่อให้สามารถเชื่อมโยงกับหน้าต่างได้

 (ฟังก์ชั่น($){ Canvas2Image = ฟังก์ชั่น () { ... }}

_dataURL สามารถใช้เพื่อสะท้อน Canvas2Image.saveAsPNG(canvas) จะดาวน์โหลดโดยตรง

Canvas2Image มีวิธีการดังต่อไปนี้:

 Canvas2Image.saveAsImage(canvasObj, ความกว้าง, ความสูง, ประเภท)Canvas2Image.saveAsPNG(canvasObj, ความกว้าง, ความสูง)Canvas2Image.saveAsJPEG(canvasObj, ความกว้าง, ความสูง)Canvas2Image.saveAsGIF(canvasObj, ความกว้าง, ความสูง)Canvas2Image.saveAsBMP(canvasObj, ความกว้าง, ความสูง)Canvas2Image.convertToImage(canvasObj, ความกว้าง, ความสูง, ประเภท)Canvas2Image.convertToPNG(canvasObj, ความกว้าง, ความสูง)Canvas2Image.convertToJPEG(canvasObj, ความกว้าง, ความสูง)Canvas2Image.convertToGIF(canvasObj, ความกว้าง, ความสูง)Canvas2Image.convertToBMP(canvasObj, ความกว้าง, ความสูง)

ใน vue คุณสามารถใช้ $refs เพื่อกำหนด DOM;

backgroundColor: null ประโยคนี้สามารถทำให้ภาพที่ถ่ายโอนไม่มีขอบสีขาว

 วิธีการ: { toImage() { la _this = this; html2canvas(this.$refs.index,{ backgroundColor: null }).then((canvas) => { la _dataURL = canvas.toDataURL(image/png); // _this.dataURL = _dataURL; Canvas2Image.saveAsPNG(ผ้าใบ) });

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network