بكسل ديناميكي عنصر صورة HTML

Question

سألتقط صورة على صفحة ويب ، ثم استخدم JavaScript (أو أي شيء سيكون أكثر ملاءمة) لـ "Pixelate" (على سبيل المثال إلى 20 بكسل). بعد ذلك ، بينما يقوم المستخدم بالتمرير أسفل الصفحة ، أحتاج إلى زيادة الصورة تدريجياً في الدقة ، حتى لا يتم تصنيفها.

أي أفكار كيف يمكنني القيام بذلك؟ أدرك أنه يمكنني استخدام PHP لتغيير حجم صورة وعدة مرات وتبديل الصورة ، لكن ذلك سيتطلب تحميل العديد من الصور الإضافية. أيضًا ، أعلم أنه من المحتمل أن أقوم بالتأثير مع Flash & Pixelbender ، لكنني أريد تحقيق ذلك ضمن حدود HTML5 و CSS و JavaScript إن أمكن.

نقدر أي أفكار!

تحديث: شيء من هذا القبيل ، ولكن مع JavaScript بدلاً من الفلاش؟ http://www.reflektions.com/miniml/template_permalink.asp؟id=390

Answer 1

يمكنك تقديم الصورة في مخفية <canvas> عنصر. ثم استخدم اشتقاق التقنية الموصوفة هنا http://dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation . لإنشاء نسخة بكسل من الصورة في ثانية <canvas> عنصر باستخدام انخفاض من أي وقت مضى fillRect's. وبهذه الطريقة يمكنك حتى تخزين بيانات الصورة الزراعية.

تعديل: سأستخدم 2 <canvas> العناصر بحيث عليك فقط جلب الصورة الأصلية ورسمها مرة واحدة. ربما يمكنك التخزين المؤقت/ذاكرة التخزين المؤقت لهذه الصورة في نفس الوقت <canvas> العنصر ولكن من خلال رسمه خارج منفذ العرض ، لست متأكدًا مما إذا كان هذا ممكنًا.

Answer 2

أود استخدام حساب حيث تحصل على العرض بالبكسل مقسومًا على العرض المربع ثم الارتفاع مقسومًا على الارتفاع المربع. هذا من شأنه أن يمنحك الدقة المنخفضة التي تبحث عنها.

ثم يمكنك إيجاد طريقة لتغيير الدقة إلى النتيجة أو الاستيلاء على لون كل بكسل في الموضع (الارتفاع والعرض)/2 من المربع الذي تبحث عنه. ثم قم بإنشائها في علامات DIV أو الجدول مع اللون والحجم المناسبين مما يؤدي في النهاية إلى الصورة الذاتية.

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

اسمحوا لي أن أرى ما إذا كان بإمكاني التفكير في المزيد من الأفكار ، فسوف أقوم بتحريرها.

Answer 3

القي نظرة على http://close-pixelate.desandro.com/

التفسير هنا: https://stackoverflow.com/a/8372981/22470

Answer 4

ليس بطريقة محمولة.

قد يكون ذلك قابلاً للتنفيذ في الفلاش. تتيح ملحقات Firefox JS قراءة الصور كصفائف JS ، وسلاسل Base64 ، وما إلى ذلك ، يمكنك تجربة اختراق "1 div = 1 بكسل" ، ولكن من الصعب الحصول على أي حجم معقول من الصورة بأي سرعة معقولة. إذا كنت تشعر بفرط حقًا ، فيمكنك محاولة إنشاء صور مشفرة BASE64 أثناء الطيران باستخدام البيانات: URI ... العديد من الطرق ولكن لا شيء جيد ...