عند إنشاء بعض صفحات الأنشطة، غالبًا ما تكون هناك حاجة إلى تحميل الصور، ويجب أيضًا إنشاء الصور والنصوص والملصقات التي تم إنشاؤها في بطاقة يمكن للمستخدمين الضغط عليها لفترة طويلة لحفظها. لقد تم إكمال هذا المطلب مرة واحدة من قبل، وتم استيفاءه مرة أخرى مؤخرًا باستخدام اللوحة القماشية. مجرد تجميع بلوق. إذا كانت هناك طريقة تنفيذ أفضل، فنحن نرحب بمناقشتها معًا.
استخدم القماش لضغط الصورعند استخدام علامة إدخال الكتابة في html والنوع هو ملف، يمكنك استدعاء ألبوم الصور الخاص بهاتفك لتحديد الصور، ويمكنك أيضًا دعم الكاميرا لالتقاط الصور. في هذا السيناريو، قد يكون حجم الصورة أكبر وقد يتجاوز الحد الأقصى للنطاق الذي تدعمه الواجهة الخلفية، مما يتسبب في فشل التحميل.
<معرف الإدخال=نوع الملف=ملف>
1. احصل أولاً على ملف الصورة
var eleFile = document.querySelector('#file'); var Reader = new FileReader() eleFile.addEventListener('change', function (event) { file = events.target.files[0]; console.log(file) // الملف المحدد هو صورة if (file.type.indexOf(image) == 0) { Reader.readAsDataURL(file } });2. الآن بعد أن حصلت على ملف الصورة، عليك أن تفهم استخدام كائن FileReader في js.
تسمح كائنات FileReader لتطبيقات الويب بقراءة محتويات الملف (أو المخزن المؤقت للبيانات الأولية) المخزنة على كمبيوتر المستخدم بشكل غير متزامن
طريقة:
| اسم الطريقة | المعلمة | يصف |
|---|---|---|
| إحباط | لا أحد | مقاطعة القراءة |
| readAsBinaryString | ملف | الكود الثنائي |
| readAsDataURL | ملف | قراءة الملف كـ DataURL |
| readAsText | ملف [ترميز] | قراءة الملف كنص |
| حدث | يصف |
|---|---|
| onabort | تم تشغيله عند المقاطعة |
| com.onerror | onabort |
| تحميل | يتم تشغيله عند اكتمال قراءة الملف بنجاح |
| com.onloadend | يتم تشغيله من خلال إكمال القراءة، بغض النظر عن النجاح أو الفشل |
| com.onloadstart | الحرائق عند بدء القراءة |
| com.onprogress | قراءة |
متابعة العملية المذكورة أعلاه بعد الحصول على الصورة، تحتاج إلى معالجة الملف وتحويله في هذا الوقت
var Reader = new FileReader(); // اقرأ الملف في الصفحة على شكل عنوان URL للبيانات Reader.readAsDataURL(file); Reader.onload=function(e) { console.log(reader) }الآن بعد أن تم استرداد الصورة وتحويلها، يمكن الآن ضغطها.
var eleFile = document.querySelector('#file'); var Reader = new FileReader() eleFile.addEventListener('change', function (event) { file = events.target.files[0]; // console.log( file) // الملف المحدد هو صورة if (file.type.indexOf(image) == 0) { var Reader = new FileReader(); // تحويل الملف إلى بيانات اقرأ الصفحة على شكل عنوان URL Reader.readAsDataURL(file); Reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); this.result ) CanvasDataURL(this.result, 100, 0.5) } } }) /* [canvasDataURL مضغوط بواسطة قماش] * @params path التنسيق الأساسي 64 للصورة* @params targetWidth عرض الصورة المضغوطة* @paramsquality كلما كانت قيمة جودة الصورة أصغر، كانت الصورة المرسومة غير واضحة*/ function CanvasDataURL(path, targetWidth,quality) { var img = new Image(); img.src = path img.onload = function () { // var that = this // console.log(that) // الضغط النسبي الافتراضي var w = this.width var h = this.heightscale = w / h; w = targetWidth h = targetWidth /scale var الجودة = الجودة // جودة الصورة الافتراضية هي 0.7 // إنشاء قماش var Canvas = document.createElement('canvas'); ctx = Canvas.getContext('2d'); // إنشاء عقدة السمة var anw = document.createAttribute(width); document.createAttribute(height); anh.nodeValue = h; Canvas.setAttributeNode(anw); ctx.drawImage(this, 0, w, h); كلما كانت الصورة المرسومة أكثر ضبابية var base64 = Canvas.toDataURL('image/jpeg',quality var result=document.getElementById(result); result.setAttribute(src, base64) } }الأمر بسيط جدًا، لذا يمكنك الحصول على الصورة المضغوطة من الكود أعلاه، يمكننا أن نعرف أن المبدأ هو أن طريقة toDataURL في اللوحة القماشية يمكنها تحديد تنسيق الصورة المضغوطة وجودة ضغطها، وضغط معلومات اللوحة القماشية وتحويلها. لضغط base64.
صنع بطاقات باستخدام القماشالمشهد: قم بدمج الصورة المضغوطة للتو مع صورة أخرى، ثم اضغط لفترة طويلة للحفظ.
function drawCanvas (target) { var Canvas = document.querySelector('#myCanvas') var ctx = Canvas.getContext('2d') // هي وحدات البكسل الفعلية الموجودة على الجهاز ونسبة وحدات البكسل المستقلة عن الجهاز (الانخفاضات) var dp = window.devicePixelRatio ||.1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||.ctx.mozBackingStorePixelRatio ||.ctx.msBackingStorePixelRatio ||.ctx.oBackingStorePixelRatio ||. ctx.backingStorePixelRatio ||. oldWidth * نسبة Canvas.height = oldHeight * نسبة Canvas.style.width = oldWidth + 'px' Canvas.style.height = oldHeight + 'px' ctx.scale(ratio، نسبة) var headerImg = new Image() var bgImg = new Image() headerImg.src = target bgImg.src = '../bg.png' headerImg.onload = (e) => { // نسبة العرض إلى الارتفاع للصورة varrate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / معدل )) // صورة الخلفية ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('رائع', 80, 70) var resultImg = new Image() resultImg.src = Canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' varcardImg=document . getElementById(cardImg); CardImg.setAttribute(src, resultImg.src) } }احصل على الصورة التي حصلت عليها للتو، وبعد تحميل الصورة، ارسمها على اللوحة القماشية، ويمكنك أيضًا إضافة نص، وما إلى ذلك. وأخيرًا، يتم تحويل معلومات اللوحة القماشية إلى ترميز base64 للتنفيذ. يمكن ممارسة الأمثلة من خلال التعليمات البرمجية
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.