رمز مثال للقماش لتنفيذ رمز الاستجابة السريعة وتوليف الصور

في الإصدار السابق، كان هناك طلب في الشارع على استخدام عنوان URL لإنشاء رمز الاستجابة السريعة، ثم دمجه مع صورة أخرى لإنشاء صورة لك.

1. استخدم jr-qrcode لإنشاء بيانات URL:base64 لاستخدام img
2. ثم استخدم القماش لدمج الصورتين في صورة واحدة

بعد إنشاء الصورة، وجدت أن الصورة ضبابية للغاية. الحل هو توسيع اللوحة القماشية مرتين وتضخيم المعلمات الأخرى مرتين.

jr-qrcode يمكنك استخدام npm install --save jr-qrcode لتثبيت هذه الحزمة

تتمثل الوظيفة في تحويل النص إلى data:base64 لاستخدامه بواسطة img's src

الرمز هو كما يلي

 import React, { Component } from 'react'const qrcode = require('jr-qrcode')const LoadImg = (src) => { const paths = Array.isArray(src) ? src : [src]; ]; paths.forEach((path) => { وعد.push(new Promise((حل، رفض) => { Let img = new Image(); img.crossOrigin = Anonymous; img.src = path; img.onload = () => { Resolve(img }; ') } })) }); return Promise.all(promise);}const getImageData = (url, src) => { const imgsrc = qrcode.getQrBase64(url) Let Canvas = document.createElement('canvas') عرض ثابت = document.documentElement.clientWidth ارتفاع ثابت = document.documentElement.clientHeight Canvas.width = width*2 Canvas.height = height*2 Let ctx = Canvas.getContext(2d)loadImg([imgsrc, src]).then(([img1, img2]) => { ctx.drawImage(img2, 0, 0, width*2, height*2) ctx.drawImage(img1, width-80, height*2-220, 200, 160) ctx.fillStyle = 'rgba (0,0,0,0.3)'; ctx.fillRect(width-80, height*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; 160) دع imageURL = Canvas.toDataURL(image/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}تصدير الفئة الافتراضية QRcode Extends Component { render() { const { url , picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}

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