أخبرني الرئيس قبل يومين أن وظيفة الصورة الرمزية المخصصة على الموقع الرسمي للنمر تم تنفيذها من قبل Flash. لذا اسمحوا لي أن أستخدم القماش لتنفيذ نفس الميزة ، التي درستها القماش مؤخرًا ، لذلك وافقت بسهولة (في الواقع ، لم تتفق إذا لم تكن قد درستها ، هاهاهاهاها ~)
عرض الإنجاز:عنوان GIT: https://github.com/ry928330/portraitdiy
وصف الوظيفة:نظرًا لأنك يجب أن تلتقط لقطة شاشة للمنطقة التي تكون فيها الصورة ، يجب عليك صنع قماش وتغطية المنطقة التي توجد بها الصورة. هنا ، نقدم وظيفة لإنشاء نفس القماش استنادًا إلى اسم الفصل للعنصر في DOM ، ونغطيه على عنصر DOM الأصلي:
الوظيفة CreateCanvasbyclassname (tag) {var canvasinitialwid = $ ('.' اليسار -'. portraitcontainer. (). اليسار = clearcanvasoB : "قماش" ، عرض: canvasinitialwidth ، الارتفاع: canvasinitialheight}) ؛ var appendele = $ ('. portraitainer'). ، canvasinitight) ؛مع هذه القماش ، يمكنك العمل فقط في المنطقة التي توجد بها صورتك. أولاً ، خفض المنطقة بأكملها لرسم ظل أسود فاتح ، ثم محو اللون في منطقة الصندوق الصغيرة الأولية. ثم أضف MouseDown ، Mousemove ، Mouseup إلى الصفحة بأكملها.
وظيفة mousemovefunc (الحدث) 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 -10) &&&&&& ClearCanvasobj .cursor = 'default' ؛ // var outctx = canvas.getContex ، 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) J.Top ، ClearCanvasobj. العرض ، clearcanvasobj.hight ، clearcanvasobj.mousex = الحدث (ClearCanvasobj.xstart ، clearcanvasobj.ystart ، clearcanvasobj.width ، clearcanvasobj. Height) ؛ XSTART + CLEARCANVASOBJ.WIDTH> = OutricomWidth) {clearcanvasobj.width = OUTERDOMWIDTH -CLEARCANVASOB.XSTART ight -clearcanvasobj.ystart ؛ الارتفاع = OUTERDODHIGHT -CLEARCANVASOBJ.YSTART ؛} if (ClearCanvasObj.WIDTH <= 10) {clearCanvasObj.width = 10 ؛} if (ClearCanvasObj.heigh <= 10) {clearcanvasob XSTART ، ClearCanvasobj.ystart ، ClearCanvasobj.Width ، ClearCanvasobj.Height) ؛ ClientX ؛ = event.clienty ؛}}في الوظيفة ، تحتاج إلى الانتباه إلى حالة السحب ، وهو أن المربع لا يمكن سحبه إلى حدود الصورة التي تكون فيها الصورة ؛ يقع الإطار لتغيير نمط الماوس. أثناء عملية السحب ، قمنا باستمرار بإعادة توجيه المنطقة التي تحركت فيها الحركة المربعة (أي ظل الرسم بشكل مستمر) ، ثم أطلقنا على وظيفة واضحة في الوضع الجديد لإعادة إخراج إطار مربع صغير. في عملية السحب أو التمدد ، سنقوم باستمرار بالاتصال بالوظيفة المنتجة. الرمز كما يلي:
الدالة تنتج (Imageurl ، أعلى ، العرض) {var img = new Image () ؛ foreach (function (it ، index) {targetCanvas = document.getElementById (item.class) ؛ targetctx.push (targetcanvas.getContext ('2d')) ؛ targe tctx [index] .clearRect (0،0 ، item.width ، item.head) ؛دعنا نتحدث عن دور هذه الوظيفة. نظرًا لأنه يجب عليك قلب المنطقة التي يقع فيها DOM في صورة بحيث يمكنك استخدام وظيفة DrawImage لاعتراض المنطقة التي تحتاجها. لذلك نستخدم وظيفة HTML2CANVAS للتحدث عن الصورة.
html2canvas (document.getElementById ('imgcontainer') ، {onrendered: function (canvas) {var imageurl = canvastranstoimage (canavs) ؛ ...}) يمكن أن vastranstoimage (canvas) {var imageurl = canvas.todataurl ') ؛بعد ذلك ، يمكنك تسهيل حاوية القماش على اليمين.
التبعية ذات الصلة:
كود نسخ