مثال على رمز تنفيذ وظيفة لغز القماش

لقد واجهت مؤخرًا وظيفة تجميع الصور أثناء العمل في مشروع ما، لذا سأشارك وظيفة تجميع الصور المغلفة هنا. قد لا يكون الكود مكتوبًا بشكل جيد. إذا كانت لديك أي أسئلة أو كانت لديك طريقة أفضل، فيمكنك الدردشة معي على انفراد. أو أشار التعليقات، شكرا لكم جميعا

فكرة التنفيذ بسيطة جدًا في الواقع، فهي تتضمن بشكل أساسي الحصول على رابط الصورة وعرض الصورة وارتفاعها من خلال الخادم، ثم استخدام التكرار البسيط لتنفيذها (لاحظ أن المحطة المتنقلة تحتاج إلى استخدام نسبة 2). مرات، وإلا فإن الصورة ستكون ضبابية)

 /** * بيانات رسم القماش * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - عنوان رابط الصورة * @param {number} option.photoData[]. العرض - عرض الصورة* @param {number} option.photoData[].height - ارتفاع الصورة* @param {Object[]} option.wordData * @param {string} option.wordData[].color - اللون من النص* @param {number} option.wordData[].fontSize - حجم النص* @param {string} option.wordData[].fontWeight - سمك النص* @param {number} option.wordData[].left - الجانب الأيسر من النص المسافة* @param {number} option.wordData[].top - الهامش العلوي للنص* @param {string} option.wordData[].word - محتوى النص* @param {هدف[]} option.iconData * @param {string} option.iconData[].photo - عنوان الرابط للأيقونة * @param {number} option.iconData[.left - الهامش الأيسر للأيقونة * @param {number} الخيار .iconData[] .top - الهامش العلوي للأيقونة * @param {number} option.iconData[].width - عرض الأيقونة * @param {number} option.iconData[].height - ارتفاع الأيقونة أيقونة * */وظيفة CanvasDraw(option){ var Canvas = document.createElement('canvas')، ctx = Canvas.getContext('2d')، clientWidth = document.documentElement.clientWidth، CanvasHeight = 0، المسافة = 0، photoCount = 0، IconCount = 0; // سيكون الرسم المزدوج على الهاتف المحمول على القماش غير واضح، لذا يلزم مضاعفة الرسم، ولكن ليس على جانب الكمبيوتر. clientWidth = clientWidth > 480? = Math.floor(clientWidth / option.photoData[index - 1].width * option.photoData[index - 1].height) item.distance = distance; } CanvasHeight += Math.floor(clientWidth / item.width * item.height); item.imgHeight = Math.floor(clientWidth / item.width * item.height }) console.log( option.photoData) if (ctx) { Canvas.width =clientWidth;canvas.height = CanvasHeight +clientWidth / 4 * 2 ctx.fillStyle = '#fff' ctx.fillRect(0, 0, Canvas.width, Canvas.height) // ارسم نص الصورة if(option.wordData.length){ option.wordData.forEach(function(item,index) { ctx.fillStyle = item.color; ctx.font = 'عادي عادي' + item.fontWeight + ' ' + Calc(item.fontSize) + 'px Microsoft YaHei'; ctx.textAlign = 'left'; حساب متناسب (num){ return Math.floor(clientWidth * num / 750) } drawPhoto('photo0') وظيفة drawPhoto(photoDom){ var photoDom = new Image(); photoDom.setAttribute('crossOrigin', 'Anonymous'); photoDom.src = option.photoData[photoCount].photo; photoDom.onload = function(){ ctx.drawImage(photoDom, 0, option.photoData[] photoCount].distance,clientWidth, option.photoData[photoCount].imgHeight); photoCount++; option.photoData.length) { drawIcon('icon0') function drawIcon(iconDom){ var iconDom = new Image(); iconDom.setAttribute('crossOrigin', 'Anonymous'); .icon; iconDom.onload = function(){ ctx.drawImage(iconDom, حساب (option.iconData[iconCount].left)، قماش الارتفاع + حساب (option.iconData[iconCount].top)، حساب (option.iconData[iconCount].width)، حساب (option.iconData[iconCount].height)) IconCount++; if (iconCount == option.iconData. length) { var imageURL = Canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) // امسح مرجع الإغلاق وحرر الذاكرة؛ drawPhoto = null }else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('photo'+ photoCount) } } } }else{ console.log('canvas غير مدعوم') } }

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.