Jsdom: URL.createObjectURLとURL.revokeObjectURLを追加します

https://github.com/eligrey/Blob.jsの実装をjsdomで使用できますか？

jsdom内でjspdfを使用しているため、これによってブロックされています。

いいえ、そこにあるコードは、blob URLではなく、データURLを作成しているように見えます。 誰かが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は仕様に厳密に従っていないと思います。同じ引数を2回渡すか、数値や配列などの予期しないタイプを渡しても、 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()があると思います。

最後にもう1つ：

serializedが「null」の場合は、実装定義の値に設定します。

「実装定義値」とはどういう意味ですか？

私はすべての質問に答えてもらうようです。
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 、上記のコードは見栄えがよく、そこに追加できますか？ 追加できますか？

BlobURLを作成する以上のことを行う必要があります。 その後、そのように生成されたURLをXMLHttpRequest提供できるようにする必要があります。

BlobURLを作成する以上のことを行う必要があります。 その後、そのように生成されたURLをXMLHttpRequestなどに提供できるようにする必要があります。

それが必要ですか？ ユースケースは何ですか？ XMLHttpRequestの既存のロジックはそれをうまく処理しますか？

jsdomの目標が、ブラウザの動作を正確に再現することであるかどうかはわかりません。
その場合、私たちはブラウザを書いています。

IMOは、実際のユースケースができるまでこれを延期する必要があります。

これを前進させるために他に何ができるでしょうか？

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

serializeURL()は、仕様で説明されているアルゴリズムよりも少し多くのことを行います。
それを使用するべきですか、それとも仕様どおりに実装する必要がありますか？

オブジェクトURLが実際に機能しない場合（XHR、img要素などで使用される場合）、jsdomにオブジェクトURLを追加することにはまったく関心がありません。 それらを作成するだけでは、非常に面白くありません。 数行のコードでそれを行うことができます。 そのためにjsdomの実装全体は必要ありません。

さて、それを実装するために何が必要ですか？

NodeでDOMAPIを使用できるようにするだけでなく、自動テストを実行するためのこのようなブラウザーがあると非常に役立ちます。

ただし、ノードの使用に関する特定のユースケースは、Blobが作成されるブラウザー/ノードコードを実行している場合、このメソッドを両方の環境で使用して、コンテンツを内省できるようにすることです（ブラウザーでは少なくともそれ以外の場合は許可されないため）これ）。 （私の場合、IndexedDB（およびpostMessage ）で使用される構造化クローンアルゴリズムでBlobをクローンするためのノード固有のコードを記述しないようにすることができます。）

BLOB URLは、サーバーから独立したメモリで作業するという特別なニーズを満たします。 data: URLよりもBlobURLには3つのユニークな側面があると思います（エスケープなどせずに簡単に作成できることに加えて）。

1つは、メモリ内のコンテンツを超えて、ファイルのコンテンツ全体をURL内でエンコードする必要なしに（また、使用するまで逆参照する必要なしに）ファイルを参照できることです。

2つは、ブラウザセッションを超えて、またはユーザーのブラウザの外部でデータの永続性を回避する際のセキュリティ/プライバシーに役立つ可能性があることです。

3つ目は、セッション内でもBlob URLを取り消すことができるため、参照の有効期限が切れることがあります（たとえば、画像を作成し、Blob URLを介して表示した後、ユーザーが画像を削除した場合、URLを取り消してBlobを使用できます。たとえばdata URLの場合とは異なり、URLを再利用することはできません。

オブジェクトURLが実際に機能しない場合（XHR、img要素などで使用される場合）、jsdomにオブジェクトURLを追加することにはまったく関心がありません。 それらを作成するだけでは、非常に面白くありません。

react-snapshotを使用して、React（CRA）プロジェクトのサーバー側レンダリングを実行したいと思います。 私のプロジェクトではreact-mapbox-glも使用しており、 ます。 そして、プロセスは次の理由で失敗します

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

サーバーで実際に地図をレンダリングすることに興味はありません。サーバーで地図をレンダリングする代わりにプレースホルダーをレンダリングしたいのですが、このエラーによりそれができなくなります。

数行のコードでそれを行うことができます。 そのためにjsdomの実装全体は必要ありません。

少なくともこれにnoop関数を追加するためにjsdomにパッチを当てることができる方法はありますか？ 失敗すると思いますが、少なくともこれが出発点になります。

readmeを参照してください： https ：

ありがとう。 これがない古いAPI、たとえばjsdom.envで立ち往生しているのは残念です

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

（facepalm）少し難しくなります

UPD

createdコールバックがあります

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

この機能リクエストのステータスはどうなっていますか？ 持っていると確かに便利でしょう。

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

@fredvollmer jsdomでjestを使用していて、この関数をnoopしたい場合は、このコードを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

これがgulpでも適用できるかどうか誰かが知っていますか？ 基本的に、uncssが使用しているjsdomから発生するcreateObjectURLに関するjsdomエラーを黙らせたいと思います。

前もって感謝します！

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

明確にするために、次のようなことをします

function noOp () { }

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

jest構成の「setupFiles」ファイル内に配置した場合にのみ機能します。 したがって、package.jsonまたはどこにでも
"jest": { "setupFiles": [ "<rootDir>/internals/testing/setup_file.js" ], }
他の人が書いたコードをそのファイルの中に入れます。 （そのファイルが存在しない場合は、作成する必要があるかもしれません）

これが解決策について混乱している人に役立つことを願っています

img.src = URL.createObjectURL（blob）;

動作せず、エラーURLを取得しますの関数ではありません。
返されたblobをimagesrcに割り当てる代替手段はあります

これはハッキーで、お勧めしませんが、Node.js用にcreateObjectURLとrevokeObjectURL単純化実装を作成しました。
使用する前に、自分が何をしているのかを確認してください。