เจ้านายบอกฉันเมื่อสองวันก่อนว่าฟังก์ชั่นของอวตารที่กำหนดเองบนเว็บไซต์อย่างเป็นทางการของ Tiger ถูกนำไปใช้โดย Flash ดังนั้นให้ฉันใช้ Canvas เพื่อใช้คุณสมบัติเดียวกันฮิฮิเพิ่งศึกษาผืนผ้าใบเมื่อเร็ว ๆ นี้ดังนั้นฉันจึงเห็นด้วยอย่างง่ายดาย (จริง ๆ
การแสดงผลสำเร็จ:ที่อยู่ Git: https://github.com/ry928330/portraitdiy
ฟังก์ชั่นคำอธิบาย:เนื่องจากคุณต้องถ่ายภาพหน้าจอของพื้นที่ที่เป็นภาพคุณต้องสร้างผืนผ้าใบและครอบคลุมพื้นที่ที่ภาพอยู่ ที่นี่เราให้ฟังก์ชั่นเพื่อสร้างผืนผ้าใบตำแหน่งเดียวกันตามชื่อคลาสขององค์ประกอบใน DOM และครอบคลุมในองค์ประกอบ DOM ดั้งเดิม:
ฟังก์ชั่น CreateCanVasByClassName (TAG) {VAR CANVASINITIALWIDTH = $ ('.' + TAG) .Width (); ซ้าย -$ ('.' tag) .parent ('. PortraitContainer') . (). Top + 1; ซ้าย = ซ้าย; : 'Canvas', ความกว้าง: CanvasinitialWidth, ความสูง: CanvasinitialHeight}); var uptendele = $ ('. PortraitContainer') , Canvasinitight);ด้วยผืนผ้าใบนี้คุณสามารถใช้งานได้อย่างซุกซนในพื้นที่ที่รูปภาพของคุณอยู่ ก่อนอื่นให้ลดพื้นที่ทั้งหมดเพื่อวาดเงาสีดำอ่อนจากนั้นลบสีในพื้นที่กล่องเล็ก ๆ เริ่มต้น จากนั้นเพิ่ม Mousedown, Mousemove, เหตุการณ์ MouseUp ไปยังทั้งหน้า
ฟังก์ชั่น mousemovefunc (เหตุการณ์) { / * ทำหน้าที่ในเหตุการณ์ * / var newmousex = event.clientx -clearcanvasobj.left; Clearcanvasobj.width && nowmousey> = clearcanvasobj.ysstart && nowmousey <= clearcanvasobj.ysstart + clearcanvasobj.heigh) anvasarea = true; > = ClearCanVasObj.xStart + ClearCanvasObj.width -10) && (nowmousex <= clearcanvasobj.xstart + clearcanvasobj.width + 10) && ey> = clearcanvasobj.ysstart + clearcanvasobj.height - Clearcanvasobj.height + 10) {ClearCanvasobj.iscanvasarea = true; .cursor = 'default';} var outerdomwidth = $ (. imgcontainer) ; , clearcanvasobj.ysstart) ry_ctx.fillrect (clearcanvasobj.xstart, clearc anvasobj.ystart, clearcanvasobj.width, clearcanvasobj.height); = xdistance; ความกว้าง)> = outerdomwidth) {clearcanvv) ท่อนไม้ ('2', Clearcanvasobj.xstart, Clearcanvasobj.ystart) ry_ctx.clearrect (Clearcanvasobjj .xstart, Clearcanvasobj.ysst, Clearcanvasobj.width, Clearcanvasobj.height); obj.top, Clearcanvasobj ความกว้าง, clearcanvasobj.height, imageurl) clearcanvasobj.mousex = เหตุการณ์ (Clearcanvasobj.xstart, Clearcanvasobj.ystart, Clearcanvasobj.width, Clearcanvasobj .Height); XSTART + CLEARCANVASOBJ.WIDTH> = OutricomWidth) {ClearCanvasobj.width = OuterdomWidth -clearcanvasob.xstart; terdomheight -clearcanvasobj.ystart; ความสูง = outerdomheight -clearcanvasobj.ystart;} ถ้า (clearcanvasobj.width <= 10) {clearcanvasobj.width = 10;} ถ้า (clearcanvasobj.heigh <= 10) {clearcanvasob.height = 10; XStart, ClearCanvasobj.ystart, ClearCanvasobj.width, ClearCanvasobj.Height); Event.Clientx; = Event.Clienty;}}ในฟังก์ชั่นคุณต้องให้ความสนใจกับเงื่อนไขขอบเขตของการลากหนึ่งคือกล่องไม่สามารถลากไปยังขอบเขตของภาพที่ภาพอื่น ๆ เฟรมตั้งอยู่เพื่อเปลี่ยนสไตล์ของเมาส์ ในระหว่างกระบวนการลากเรามักจะทำซ้ำพื้นที่ที่การเคลื่อนไหวของสี่เหลี่ยมจัตุรัสเคลื่อนที่ (นั่นคือเงาของการวาดภาพอย่างต่อเนื่อง) จากนั้นเรียกฟังก์ชัน ClearRect ในตำแหน่งใหม่เพื่อเปิดกรอบสี่เหลี่ยมจัตุรัสขนาดเล็กอีกครั้ง ในกระบวนการลากหรือยืดเราจะเรียกฟังก์ชั่นการผลิตมอลล์คี่อย่างต่อเนื่อง รหัสมีดังนี้:
ฟังก์ชั่นผลิต mallpic (imageurl, ซ้าย, บน, ความกว้าง, ความสูง) {var img = ภาพใหม่ (); foreach (ฟังก์ชั่น (it, index) {targetCanVas = document.getElementById (item.class); targetctx.push (targetCanvas.getContext ('2d')); targe tctx [index] .clearrect (0,0, รายการ item.head); targetctx [index] .drawimage (img, ซ้าย -clearcanvasobj.left, top -clearcanvasobj.top, ความกว้าง, ความสูง, 0, 0, item.height);พูดคุยเกี่ยวกับบทบาทของฟังก์ชั่นนี้ เพราะคุณต้องเปลี่ยนพื้นที่ที่ DOM ตั้งอยู่ในรูปภาพเพื่อให้คุณสามารถใช้ฟังก์ชั่น DrawImage เพื่อสกัดกั้นพื้นที่ที่คุณต้องการ ดังนั้นเราจึงใช้ฟังก์ชั่น HTML2CANVAS Library เพื่อพูดคุยเกี่ยวกับรูปภาพ
html2canvas (document.getElementById ('imgcontainer'), {onrendered: ฟังก์ชั่น (Canvas) {var imageurl = canvastranstoimage (canavs); ... }) ฟังก์ชั่นสามารถ vastranstoimage (canvas) ');จากนั้นคุณสามารถอำนวยความสะดวกให้กับคอนเทนเนอร์ผ้าใบทางด้านขวา
การพึ่งพาอาศัยกันที่เกี่ยวข้อง:
รหัสคัดลอก