كيفية قياس صورة (بتنسيق URI للبيانات) في JavaScript (التحجيم الحقيقي ، وليس باستخدام التصميم)

Question

نحن نلتقط علامة تبويب مرئية في متصفح Chrome (باستخدام extensions API chrome.tabs.captureVisibletab) وتلقي لقطة في مخطط URI للبيانات (سلسلة مشفرة BASE64).

هل هناك مكتبة JavaScript يمكن استخدامها لخفض الصورة بحجم معين؟

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

هل يعرف أي شخص طريقة لمعالجة مخطط URI للبيانات هذه الصور وتقليل حجمها عن طريق خفضها؟

مراجع:

• مخطط URI للبيانات http://en.wikipedia.org/wiki/data_uri_scheme
• امتدادات Chrome API على http://code.google.com/chrome/extensions/tabs.html
• تمديد "علامات التبويب المغلقة مؤخرًا" على http://code.google.com/p/crected-tabs

Answer 1

إليك وظيفة يجب أن تفعل ما تحتاجه. أنت تعطيه عنوان URL لصورة (على سبيل المثال النتيجة من chrome.tabs.captureVisibleTab, ، ولكن يمكن أن يكون أي عنوان URL) ، والحجم المطلوب ، والاستدعاء. ينفذ بشكل غير متزامن لأنه لا يوجد ضمان بأن الصورة سيتم تحميلها فورًا عند تعيين ملف src منشأه. من خلال عنوان URL للبيانات ، من المحتمل أنه لا يحتاج إلى تنزيل أي شيء ، لكنني لم أجربه.

سيتم تمرير رد الاتصال على الصورة الناتجة كعنوان URL للبيانات. لاحظ أن الصورة الناتجة ستكون PNG ، منذ تنفيذ Chrome لـ toDataURL لا تدعم Image/JPEG.

function resizeImage(url, width, height, callback) {
    var sourceImage = new Image();

    sourceImage.onload = function() {
        // Create a canvas with the desired dimensions
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        // Scale and draw the source image to the canvas
        canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);

        // Convert the canvas to a data URL in PNG format
        callback(canvas.toDataURL());
    }

    sourceImage.src = url;
}

Answer 2

أما بالنسبة لمشكلات الأداء ، فربما يمكن أن تساعد علامة القماش؟ https://developer.mozilla.org/en/canvas_tutorial/using_images#drawimage_example_2

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