Jsdom: URL.createObjectURL और URL.revokeObjectURL जोड़ें

क्या https://github.com/eligrey/Blob.js में कार्यान्वयन का उपयोग jsdom में किया जा सकता है?

मुझे इसके द्वारा jspdf अंदर jsdom का उपयोग करने के लिए अवरोधित किया गया है।

नहीं, ऐसा लगता है कि वहां का कोड डेटा यूआरएल बनाता है, ब्लॉब यूआरएल नहीं। किसी को 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 हो सकता है

मुझे लगता है कि क्रोम सख्ती से कल्पना का पालन नहीं कर रहा है, URL.revokeObjectURL NetworkError नहीं फेंकेगा यदि आप एक ही तर्क को दो बार पास करते हैं या किसी भी प्रकार की अपेक्षा नहीं करते हैं, जैसे संख्या या सरणी।

संपादित करें:
फ़ायरफ़ॉक्स के साथ भी ऐसा ही होता है, कार्यान्वयन को सरल रखने के लिए और ब्राउज़र की तरह, मुझे लगता है कि ब्लॉब स्टोर की आवश्यकता नहीं है और URL.revokeObjectURL एक नोप फ़ंक्शन हो सकता है।

इसका मत:

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 कैसे व्यवस्थित किया जाता है। तो पता नहीं कैसे कोड डालना है।

@domenic , यह उपरोक्त कोड अच्छा दिखता है और वहां जोड़ा जा सकता है? क्या आप इसे जोड़ सकते हैं?

इसे सिर्फ ब्लॉब यूआरएल बनाने से ज्यादा कुछ करना चाहिए। इसे बाद में XMLHttpRequest की पसंद को प्रदान करने के लिए जेनरेट किए गए यूआरएल को अनुमति देनी चाहिए।

इसे सिर्फ ब्लॉब यूआरएल बनाने से ज्यादा कुछ करना चाहिए। इसे बाद में XMLHttpRequest की पसंद को प्रदान करने के लिए जेनरेट किए गए यूआरएल को अनुमति देनी चाहिए।

क्या इसकी जरूरत है? उपयोग के मामले क्या हैं? क्या XMLHttpRequest का मौजूदा तर्क इसे ठीक से संभाल लेगा?

मुझे यकीन नहीं है कि jsdom का लक्ष्य ब्राउज़र के सटीक व्यवहार को दोहराना है या नहीं।
अगर ऐसा है, तो हम एक ब्राउज़र लिख रहे हैं।

IMO हमें इसे तब तक के लिए टालना चाहिए जब तक कि वास्तविक उपयोग का मामला न हो।

इसे आगे बढ़ाने के लिए हम और क्या कर सकते हैं?

वर यूआरएल = blob:${serializeURL(location.origin)}/${uuid()} ;

serializeURL() कल्पना में वर्णित एल्गोरिथ्म से थोड़ा अधिक करता है।
क्या हमें इसका इस्तेमाल करना चाहिए या बिल्कुल कल्पना के रूप में लागू करना चाहिए?

यदि वे वास्तव में काम नहीं करते हैं (जब XHR, img तत्वों, आदि द्वारा उपयोग किया जाता है) तो निश्चित रूप से jsdom में ऑब्जेक्ट URL जोड़ने में कोई दिलचस्पी नहीं है। बस उन्हें बनाना बहुत, बहुत रुचिकर नहीं है। आप कोड की कुछ पंक्तियों के साथ ऐसा कर सकते हैं; इसके लिए आपको संपूर्ण jsdom कार्यान्वयन की आवश्यकता नहीं है।

ठीक है, तो इसे लागू करने की क्या ज़रूरत है?

डोम एपीआई को नोड में उपयोग करने की अनुमति देने के अलावा, स्वचालित परीक्षण चलाने के लिए इस तरह के ब्राउज़र का होना बहुत मददगार है।

लेकिन नोड उपयोग के लिए एक विशिष्ट उपयोग मामला यह है कि यदि आप ब्राउज़र/नोड कोड चला रहे हैं जहां एक ब्लॉब बनाया जाता है, तो इस विधि का उपयोग दोनों वातावरणों में किया जा सकता है ताकि आप सामग्री पर आत्मनिरीक्षण कर सकें (क्योंकि ब्राउज़र कम से कम अन्यथा अनुमति नहीं देता है यह)। (मेरे मामले में, यह मुझे इंडेक्सडडीबी (और postMessage ) द्वारा उपयोग किए गए संरचित क्लोनिंग एल्गोरिदम में ब्लॉब्स क्लोनिंग के लिए नोड-विशिष्ट कोड लिखने से बचने की अनुमति देगा।)

ब्लॉब यूआरएल सर्वर से स्वतंत्र मेमोरी में काम करने की एक विशेष आवश्यकता को पूरा करते हैं। मुझे लगता है कि data: यूआरएल पर ब्लॉब यूआरएल के तीन अद्वितीय पहलू हैं (बजाय से बचने के बिना उन्हें और आसानी से लिखने में सक्षम होने के अलावा)।

एक यह है कि इन-मेमोरी सामग्री से परे, वे यूआरएल के भीतर पूरी फाइल की सामग्री को एन्कोड करने की आवश्यकता के बिना फाइलों को संदर्भित कर सकते हैं (और इसे उपयोग किए जाने तक इसे संदर्भित करने की आवश्यकता नहीं है)।

दो यह है कि वे ब्राउज़र सत्र से परे या उपयोगकर्ता के ब्राउज़र के बाहर डेटा की दृढ़ता से बचने में सुरक्षा/गोपनीयता के लिए उपयोगी हो सकते हैं।

तीसरा यह है कि ब्लॉब यूआरएल को एक सत्र के भीतर भी निरस्त किया जा सकता है, संदर्भों को समाप्त होने की इजाजत देता है (उदाहरण के लिए, यदि आप एक छवि बनाते हैं, इसे ब्लॉब यूआरएल के माध्यम से प्रदर्शित करते हैं, और फिर उपयोगकर्ता छवि को हटा देता है, तो आप यूआरएल को रद्द कर सकते हैं ताकि ब्लॉब URL का पुन: उपयोग नहीं किया जा सकता है, इसके विपरीत data URL के मामले में होगा)।

यदि वे वास्तव में काम नहीं करते हैं (जब XHR, img तत्वों, आदि द्वारा उपयोग किया जाता है) तो निश्चित रूप से jsdom में ऑब्जेक्ट URL जोड़ने में कोई दिलचस्पी नहीं है। बस उन्हें बनाना बहुत, बहुत रुचिकर नहीं है।

मैं रिएक्ट -स्नैपशॉट की मदद से रिएक्ट (सीआरए) प्रोजेक्ट का सर्वर साइड रेंडरिंग करना चाहता हूं। मेरा प्रोजेक्ट भी उपयोग करता है React-mapbox-gl , जो बदले में mapbox-gl का उपयोग करता है, जो webworkify का उपयोग करता है। और प्रक्रिया विफल हो जाती है

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

मुझे वास्तव में सर्वर पर मानचित्र प्रस्तुत करने में कोई दिलचस्पी नहीं है, मैं केवल सर्वर पर मानचित्र के बजाय प्लेसहोल्डर प्रस्तुत करना चाहता हूं, लेकिन यह त्रुटि इसे रोकती है।

आप कोड की कुछ पंक्तियों के साथ ऐसा कर सकते हैं; इसके लिए आपको संपूर्ण jsdom कार्यान्वयन की आवश्यकता नहीं है।

क्या कोई तरीका है जिससे मैं कम से कम इसके लिए noop फ़ंक्शन जोड़ने के लिए jsdom को पैच कर सकता हूं? मुझे लगता है कि यह विफल हो जाएगा, लेकिन यह कम से कम शुरुआती बिंदु होगा।

रीडमी देखें: 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 अगर jsdom के साथ जेस्ट का उपयोग कर रहे हैं और आप इस फ़ंक्शन को नोप करना चाहते हैं तो आप इस कोड को 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" फ़ाइल में डालेंगे। तो अपने package.json में या जहाँ भी आपके पास है
"jest": { "setupFiles": [ "<rootDir>/internals/testing/setup_file.js" ], }
आप उस फाइल के अंदर दूसरों द्वारा लिखे गए कोड को डाल दें। (यदि वह फ़ाइल मौजूद नहीं है तो आपको इसे बनाने की आवश्यकता हो सकती है)

आशा है कि यह समाधान के बारे में भ्रमित किसी की भी मदद करेगा

img.src = URL.createObjectURL (बूँद);

काम नहीं कर रहा है, एक त्रुटि प्राप्त करना URL.createObjectURL जेस्ट टेस्ट केस फ़ाइल में जाँच करते समय
क्या छवि स्रोत पर लौटाए गए ब्लॉब को असाइन करने का कोई

यह हैकी है और मैं इसकी अनुशंसा नहीं करता, लेकिन मैंने Node.js के लिए createObjectURL और revokeObjectURL सरलीकृत
कृपया सुनिश्चित करें कि आप इसका उपयोग करने से पहले जानते हैं कि आप क्या कर रहे हैं।