أمثلة على الصور المضغوطة وطرق إنتاج البطاقات

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

عند استخدام علامة إدخال الكتابة في 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 لتطبيقات الويب بقراءة محتويات الملف (أو المخزن المؤقت للبيانات الأولية) المخزنة على كمبيوتر المستخدم بشكل غير متزامن

طريقة:

• readAsText: تحتوي هذه الطريقة على معلمتين، المعلمة الثانية هي طريقة ترميز النص، والقيمة الافتراضية هي UTF-8. من السهل جدًا فهم هذه الطريقة. تتم قراءة الملف في الوضع النصي، وتكون نتيجة القراءة هي محتوى الملف النصي.
• readAsBinaryString: تقرأ هذه الطريقة الملف كسلسلة ثنائية عادةً ما نقوم بنقله إلى الواجهة الخلفية، ويمكن للواجهة الخلفية تخزين الملف من خلال هذه السلسلة.
• readAsDataURL: هذه هي الطريقة المستخدمة في برنامج المثال. تقرأ هذه الطريقة الملف كسلسلة تبدأ بالبيانات:. جوهر هذه السلسلة هو عنوان URL للبيانات، وهو وسيلة لتضمين الملفات الصغيرة مباشرة في المستند. يخطط. تشير الملفات الصغيرة هنا عادةً إلى الملفات بتنسيقات مثل الصور وhtml. (يتم الحصول على طريقة base64 من هذا.)

متابعة العملية المذكورة أعلاه بعد الحصول على الصورة، تحتاج إلى معالجة الملف وتحويله في هذا الوقت

 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.