Jsdom: أضف URL.createObjectURL و URL.revokeObjectURL

هل يمكن استخدام التطبيق في https://github.com/eligrey/Blob.js في jsdom ؟

لقد حظرت من قبل هذا لاستخدام jspdf داخل jsdom .

لا ، يظهر الرمز هناك لإنشاء عناوين URL للبيانات ، وليس عناوين blob. يحتاج شخص ما إلى تنفيذ المواصفات بشكل صحيح على https://w3c.github.io/FileAPI/#dfn -createObjectURL

لست على دراية بهذا الأمر ، فهل سيكون شيئًا كهذا؟

createObjectURL(blob) {
  var implementationDefinedValue = ???
  var url = `blob:${asciiSerialize(location.origin) || implementationDefinedValue}/${createUUID()}`;
  saveToBlobStore(url, blob);
  return url;
}
revokeObjectURL(blobUrl) {
  // assume `getFromBlobStore()` will not throw
  var blob = getFromBlobStore(blobUrl);

  if (!blob) {
    throw new NetworkError(...);
  }
  removeFromBlobStore(blobUrl);
}

unional createUUID يمكن أن يكون uuidV4

أعتقد أن Chrome لا يتبع المواصفات بدقة ، فلن يقوم URL.revokeObjectURL برمي NetworkError إذا قمت بتمرير نفس الوسيط مرتين أو أي نوع غير متوقع ، مثل رقم أو مصفوفة.

يحرر:
يحدث الشيء نفسه مع Firefox ، للحفاظ على التطبيق بسيطًا ومثل المتصفحات ، أعتقد أنه ليس من الضروري أن يكون لديك متجر blob ويمكن أن يكون URL.revokeObjectURL وظيفة noop.

هذا يعني:

const uuid = require('uuid/v4');

createObjectURL(blob) {
  var implementationDefinedValue = ???
  var url = `blob:${asciiSerialize(location.origin) || implementationDefinedValue}/${uuid()}`;
  return url;
}
revokeObjectURL(blobUrl) {
  return;
}

asciiSerialize(origin) {
  if (origin.scheme) {
    return `${origin.scheme}://${serializeHost(origin.host)}${origin.port? ':' + +origin.port : ''}`;
  }
  else {
    return 'null';
  }
}

serializeHost(host) {
  ...
}

أعتقد أن هناك serializeHost() في مكان ما في الكود بالفعل.

آخر شيء هو:

إذا كانت القيمة المتسلسلة "خالية" ، فعيّنها على قيمة معرّفة من قبل التنفيذ.

ماذا تعني "القيمة المحددة للتنفيذ" تعني؟

يبدو أنني تلقيت إجابات على جميع الأسئلة.
http://stackoverflow.com/questions/42452543/what-does-implementation-defined-value-in-fileapi-unicodebloburl-mean/42452714#42452714

أعتقد أنه جاهز للتنفيذ على https://github.com/jsdom/whatwg-url

تحديث: تبين أن معظم الأشياء متوفرة في whatwg-url . لذلك أعتقد أن الكود هو ببساطة:

const uuid = require('uuid/v4');

createObjectURL(_blob) {
  var url = `blob:${serializeURL(location.origin)}/${uuid()}`;
  return url;
}
revokeObjectURL(_blobUrl) {
  return;
}

ومع ذلك ، لا أعرف كيف يتم تنظيم whatwg-url . لذلك لا تعرف كيفية إدخال الكود.

@ دومينيك ، هل الكود أعلاه يبدو جيدًا ويمكن إضافته هناك؟ هل يمكنك إضافته؟

يجب أن تفعل أكثر من مجرد إنشاء عناوين Blob URLs. يجب أن يسمح لاحقًا بتقديم عنوان URL الذي تم إنشاؤه على هذا النحو إلى أمثال XMLHttpRequest .

يجب أن تفعل أكثر من مجرد إنشاء عناوين Blob URLs. يجب أن يسمح لاحقًا بتقديم عنوان URL الذي تم إنشاؤه على هذا النحو إلى أمثال XMLHttpRequest.

هل تحتاج ذلك؟ ما هي حالات الاستخدام؟ هل المنطق الحالي لـ XMLHttpRequest سيتعامل معه بشكل جيد؟

لست متأكدًا مما إذا كان الهدف من jsdom هو تكرار السلوك الدقيق لما يفعله المتصفح.
إذا كان الأمر كذلك ، فنحن نكتب متصفحًا.

يجب على المنظمة البحرية الدولية تأجيل ذلك حتى تكون هناك حالة استخدام فعلية.

ما الذي يمكننا فعله أيضًا لدفع هذا إلى الأمام؟

var url = blob:${serializeURL(location.origin)}/${uuid()} ؛

يعمل serializeURL() أكثر قليلاً من الخوارزمية الموضحة في المواصفات.
هل يجب أن نستخدمها أو ننفذها تمامًا كما في المواصفات؟

بالتأكيد ليس هناك اهتمام بإضافة عناوين URL للكائنات إلى jsdom إذا لم تعمل بالفعل (عند استخدامها بواسطة XHR ، وعناصر img ، وما إلى ذلك). إن مجرد إنشائها أمر غير ممتع للغاية. يمكنك القيام بذلك ببضعة أسطر من التعليمات البرمجية ؛ لا تحتاج إلى تطبيق jsdom كامل لذلك.

حسنًا ، ما الذي يجب تطبيقه؟

إلى جانب السماح باستخدام واجهات برمجة تطبيقات DOM في Node ، من المفيد جدًا أن يكون لديك مثل هذا المتصفح لتشغيل الاختبارات الآلية.

لكن حالة استخدام محددة لاستخدام العقدة هي أنه إذا كنت تقوم بتشغيل متصفح / كود عقدة حيث يتم إنشاء Blob ، فيمكن استخدام هذه الطريقة في كلتا البيئتين للسماح لك بالتأمل في المحتويات (حيث لا يسمح المتصفح على الأقل بخلاف ذلك هذه). (في حالتي ، سيسمح لي ذلك بتجنب كتابة رمز خاص بالعقدة لاستنساخ Blobs في خوارزمية الاستنساخ المهيكلة كما هو مستخدم بواسطة IndexedDB (و postMessage ).)

تلبي عناوين URL الخاصة بـ Blob حاجة خاصة للعمل في ذاكرة مستقلة عن الخادم. أعتقد أن هناك ثلاثة جوانب فريدة لعناوين Blob URLs التي تزيد عن data: URLs (إلى جانب القدرة على تكوينها بسهولة أكبر دون هروب وكذا).

أحدهما هو أنه بخلاف المحتوى الموجود في الذاكرة ، يمكنهم الرجوع إلى الملفات دون الحاجة إلى ترميز محتويات الملف بالكامل داخل عنوان URL (وعدم المطالبة بإلغاء الإشارة إليها حتى استخدامها).

ثانيًا ، قد تكون مفيدة للأمان / الخصوصية في تجنب استمرار البيانات بعد جلسة المتصفح أو خارج متصفح المستخدم.

ثالثًا ، يمكن إبطال عناوين URL الخاصة بـ Blob حتى داخل الجلسة ، مما يسمح بانتهاء صلاحية المراجع (على سبيل المثال ، إذا قمت بإنشاء صورة ، وعرضها عبر عنوان Blob URL ، ثم يقوم المستخدم بحذف الصورة ، يمكنك إبطال عنوان URL بحيث لا يمكن إعادة استخدام عنوان URL ، على عكس ما سيكون عليه الحال مع عنوان URL data ).

بالتأكيد ليس هناك اهتمام بإضافة عناوين URL للكائنات إلى jsdom إذا لم تعمل بالفعل (عند استخدامها بواسطة XHR ، وعناصر img ، وما إلى ذلك). إن مجرد إنشائها أمر غير ممتع للغاية.

أريد أن أقوم بعرض جانب الخادم لمشروع React (CRA) بمساعدة لقطة رد الفعل . يستخدم مشروعي أيضًا رد فعل mapbox-gl ، والذي بدوره يستخدم mapbox-gl ، والذي يستخدم webworkify . وتفشل العملية بسبب

Error: Uncaught [TypeError: o.URL.createObjectURL is not a function]

لست مهتمًا بعرض الخريطة فعليًا على الخادم ، أريد فقط عرض العنصر النائب بدلاً من الخريطة على الخادم ، لكن هذا الخطأ يمنعه.

يمكنك القيام بذلك ببضعة أسطر من التعليمات البرمجية ؛ لا تحتاج إلى تطبيق jsdom كامل لذلك.

هل هناك طريقة يمكنني من خلالها تصحيح jsdom لإضافة وظيفة noop على الأقل لهذا؟ أفترض أنها ستفشل ، لكن هذه على الأقل ستكون نقطة البداية.

انظر التمهيدي: https://github.com/tmpvar/jsdom#intervening -before-parsing

شكرا. إنه لأمر مؤسف أنني عالق مع واجهة برمجة تطبيقات قديمة ، على سبيل المثال jsdom.env ، والتي لا تحتوي على هذا

options.beforeParse(this[window]._globalProxy);

(كف اليد) سيكون أصعب قليلاً

محدث

هناك رد اتصال created

created: (err, window) => {
  window.URL = { createObjectURL: () => {} }
}

ما هي حالة طلب الميزة هذا؟ سيكون من المفيد بالتأكيد أن يكون لديك.

https://mobile.twitter.com/slicknet/status/782274190451671040

fredvollmer إذا setupTest.js (أو برنامج إعداد مكافئ)

function noOp () { }

if (typeof window.URL.createObjectURL === 'undefined') {
  Object.defineProperty(window.URL, 'createObjectURL', { value: noOp})
}

dylanjha أحصل على TypeError: Cannot redefine property: createObjectURL

[email protected]

Franciscolourenco أنت على حق! آسف على ذلك ... لقد حدّثت للتو الكود في المثال أعلاه لتلتف بهذا الشرط وهذا يعمل لي: if (typeof window.URL.createObjectURL === 'undefined') {

جرب ذلك!

شكرًا لتذكيري بالعودة إلى هنا وتحديث المثال الخاص بي.

تم تعريفdylanjha createObjectURL ولكن ليس دالة ، لذلك تتسبب بعض المكتبات في حدوث أخطاء. عملت مهمة بالنسبة لي:

window.URL.createObjectURL = noOp

هل يعرف أي شخص ما إذا كان يمكن تطبيق هذا مع البلع أيضًا؟ في الأساس ، أريد إسكات أخطاء jsdom حول createObjectURL التي تأتي من jsdom الذي تستخدمه uncss.

شكرا لك مقدما!

if (typeof URL !== 'undefined') {
  delete URL;
}

فقط لتوضيح الأمر أكثر ، افعل شيئًا مثل

function noOp () { }

if (typeof window.URL.createObjectURL === 'undefined') {
  Object.defineProperty(window.URL, 'createObjectURL', { value: noOp})
}

سيعمل فقط إذا وضعته في ملف "setupFiles" لتهيئة jest. لذلك في package.json الخاص بك أو في أي مكان لديك
"jest": { "setupFiles": [ "<rootDir>/internals/testing/setup_file.js" ], }
تضع هذا الرمز الذي كتبه الآخرون داخل هذا الملف. (إذا لم يكن هذا الملف موجودًا ، فقد تحتاج إلى إنشائه)

آمل أن يساعد هذا أي شخص مرتبك بشأن الحل

img.src = URL.createObjectURL (blob) ،

لا يعمل ، الحصول على خطأ URL.createObjectURL ليس وظيفة أثناء التحقق في ملف حالة اختبار الدعابة.
هل هناك أي بديل لتعيين blob المرتجع للصورة src؟ تم منعي

هذا أمر صعب ولن أوصي به ، لكنني قمت بتنفيذ تطبيق مبسط
يرجى التأكد من معرفة ما تفعله قبل استخدامه.