فك تشفير BMP في JavaScript والرسم إلى Canvas Explorer

Question

أحتاج إلى تنزيل BMP مع JavaScript وتقديمه إلى الشاشة ، في Internet Explorer. أولاً ، نعم ، أعلم أن هذا مجنون ، لن أخوض في السبب ، دعنا نقبل للحظة أن IMG SRC لا يعمل بسبب قيود الأمن ، ولكن طلب AJAX مع المصادقة المناسبة في المنشور سحب الصورة. هذا المثال يتجاوز كل الأمن من أجل البساطة ويثبت فقط أننا نستطيع تقديم شيء ما.

أفضل فكرة يمكن أن أتوصل إليها هي جلب الدفق عبر Ajax ، وفك تشفير النقط ، ثم تقديمه باستخدام قماش. من الواضح أن Internet Explorer لا يدعم القماش ، ولكن لحسن الحظ ، قدمت Google غلافًا لـ SVG يسمى excanvas يمكنني استخدامه لذلك.

الرمز الخاص بي (يبدو أن رمز الرسم يعمل ، فك تشفير BMP ليس كثيرًا)

http://gist.github.com/614328

الدعم المستقبلي للصور الأخرى إلى جانب BMP قابل للتأثير ، وبسبب كيفية عمل اللوحة ، يكون من الأسهل رسم وحدات البكسل في RGBA. Melecture2D هو في الأساس فئة Wrapper لمجموعة Byte RGBA ، بالإضافة إلى رمز الرسم. يجعل Bytestream أسهل بعض الشيء على العيون التي تتعامل مع مجموعة البايت ، ويحتوي BitmapDecoder على طريقة ترجمة تنسيق BGR إلى RGBA texture2d للرسم.

هل من الممكن أن يتم ترجمة البايتات على طول الطريق أم أن هناك شيئًا ما في منطق فك التشفير الخاص بي؟

لمعلوماتك ، حصلت على مواصفات الملف من ويكيبيديا:

http://en.wikipedia.org/wiki/bmp_file_format#bitmap_information_.28dib_header.29

أي فكرة عما يحدث في منطق فك التشفير أو المنطق الذي يتسبب في رسم BMP الخاص بي بشكل غير صحيح؟

Answer 1

كان الإصلاح مزيجًا من شيئين

1. قليلا من vbscript لقراءة بايت الخام من الاستجابة
2. فك تشفير بيانات البايت بشكل صحيح ، كل بكسل غير مبطن كما تشير مقالة ويكيبيديا ، فهي في الواقع كل خط مسح مبطن لحجم dword.

رمز العمل:

http://gist.github.com/616240

Answer 2

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

على الأقل على Firefox ، يبدو أن هناك وسيلة لاسترداد البيانات الثنائية على وجه التحديد ، كما هو موضح هنا: التعامل مع البيانات الثنائية.

Answer 3

إليك نهج أسهل بكثير (وأكثر أداءً): BASE64 قم بتشفير بيانات BMP (يمكنك القيام بذلك إما على الخادم أو العميل) ثم تضمينه في الصفحة باستخدام أ بيانات URI:

<script type="text/javascript">
  function fetchBmp() {
    $.get('http://localhost:3168/experimental/imgrender/beta.bmp', function (data) {
      var base64Data = $.base64.encode(data); // *

      $('#my-image').attr('src', 'data:image/bmp;base64,' + base64Data);
    });
  }

  // * Lots of plugins for this, e.g. http://github.com/carlo/jquery-base64
</script>    

<img id="my-image" />

تدعم جميع المتصفحات الحديثة بيانات URIS (بما في ذلك IE8 وما فوق-من حلول IE7) بالإضافة إلى تنسيق BMP.

كما يشير Casablanca ، قد تكون هناك مشكلات في تحميل البيانات الثنائية عبر Ajax ، لذلك قد تضطر إلى Google في الحلول.