Jsdom: URL.createObjectURL 및 URL.revokeObjectURL 추가

https://github.com/eligrey/Blob.js 의 구현을 jsdom 있습니까?

jspdf 내에서 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이 사양을 엄격하게 따르지 않는다고 생각합니다. 동일한 인수를 두 번 전달하거나 숫자나 배열과 같이 예상하지 못한 유형을 전달하면 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() 있는 것 같습니다.

마지막으로 한 가지는 다음과 같습니다.

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 , 위의 코드가 좋아 보이고 거기에 추가할 수 있습니까? 추가할 수 있나요?

Blob URL을 만드는 것 이상을 수행해야 합니다. 이후에 이렇게 생성된 URL이 XMLHttpRequest 와 같은 사용자에게 제공되도록 허용해야 합니다.

Blob URL을 만드는 것 이상을 수행해야 합니다. 이후에 이렇게 생성된 URL이 XMLHttpRequest와 같은 사용자에게 제공되도록 허용해야 합니다.

그것이 필요합니까? 사용 사례는 무엇입니까? XMLHttpRequest 의 기존 로직이 잘 처리될까요?

jsdom 의 목표가 브라우저가 하는 일의 정확한 동작을 복제하는 것인지 잘 모르겠습니다.
그렇다면 우리는 브라우저를 작성하고 있습니다.

IMO에서는 실제 사용 사례가 있을 때까지 이를 연기해야 ​​합니다.

이것을 앞으로 나아가기 위해 우리는 무엇을 더 할 수 있습니까?

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

serializeURL() 는 사양에 설명된 알고리즘보다 약간 더 많은 작업을 수행합니다.
우리는 그것을 사용하거나 사양에서 정확히 구현해야 합니까?

실제로 작동하지 않는 경우(XHR, img 요소 등에서 사용되는 경우) 객체 URL을 jsdom에 추가하는 데에는 관심이 없습니다. 그것들을 만드는 것만으로는 매우 흥미롭지 않습니다. 몇 줄의 코드로 이를 수행할 수 있습니다. 이를 위해 전체 jsdom 구현이 필요하지 않습니다.

자, 그럼 구현하려면 무엇이 필요할까요?

Node에서 DOM API를 사용할 수 있게 하는 것 외에도 자동화된 테스트를 실행하기 위한 브라우저가 있으면 매우 유용합니다.

그러나 노드 사용에 대한 특정 사용 사례는 Blob이 생성되는 브라우저/노드 코드를 실행하는 경우 두 환경 모두에서 이 방법을 사용하여 내용을 검사할 수 있다는 것입니다. 이것). (내 경우에는 IndexedDB(및 postMessage )에서 사용하는 구조화된 복제 알고리즘에서 Blob 복제를 위한 노드별 코드를 작성하지 않아도 됩니다.)

Blob URL은 서버와 독립적인 메모리에서 작업해야 하는 특별한 요구 사항을 충족합니다. data: URL보다 Blob URL에는 세 가지 고유한 측면이 있다고 생각합니다(이스케이프 없이 더 쉽게 구성할 수 있다는 점 외에도).

하나는 메모리 내 콘텐츠를 넘어 URL 내 전체 파일 콘텐츠를 인코딩할 필요 없이 파일을 참조할 수 있다는 것입니다(사용할 때까지 역참조할 필요가 없음).

두 번째는 브라우저 세션 또는 사용자 브라우저 외부에서 데이터가 지속되는 것을 방지하는 보안/개인 정보 보호에 유용할 수 있다는 것입니다.

세 번째는 Blob URL이 세션 내에서도 취소될 수 있어 참조가 만료될 수 있다는 것입니다(예: 이미지를 만들고 Blob URL을 통해 표시한 다음 사용자가 이미지를 삭제하면 Blob이 삭제되도록 URL을 취소할 수 있습니다. URL은 data URL과 달리 재사용할 수 없습니다.

실제로 작동하지 않는 경우(XHR, img 요소 등에서 사용되는 경우) 객체 URL을 jsdom에 추가하는 데에는 관심이 없습니다. 그것들을 만드는 것만으로는 매우 흥미롭지 않습니다.

react-snapshot 의 도움으로 React(CRA) 프로젝트의 서버 측 렌더링을 하고 싶습니다. 내 프로젝트는 또한 webworkify 를 사용하는 mapbox-gl을 사용하는 react-mapbox-gl을 사용 합니다 . 그리고 프로세스가 실패하기 때문에

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

실제로 서버에서 맵을 렌더링하는 데 관심이 없습니다. 서버에서 맵 대신 자리 표시자를 렌더링하고 싶지만 이 오류로 인해 이를 방지할 수 있습니다.

몇 줄의 코드로 이를 수행할 수 있습니다. 이를 위해 전체 jsdom 구현이 필요하지 않습니다.

적어도 이것에 대한 noop 기능을 추가하기 위해 jsdom을 패치할 수 있는 방법이 있습니까? 나는 그것이 실패할 것이라고 생각하지만 이것이 적어도 출발점이 될 것입니다.

읽어보기: https://github.com/tmpvar/jsdom#intervening -before-parsing

감사 해요. 나는 이것을 가지고 있지 않은 jsdom.env 와 같은 오래된 API에 붙어 있어 유감입니다.

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

(facepalm) 좀 더 힘들겠다

UPD

created 콜백이 있습니다

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

이 기능 요청의 상태는 무엇입니까? 확실히 있으면 유용할 것입니다.

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

@fredvollmer jsdom과 함께 jest를 사용하고 이 기능을 사용하지 않으려면 이 코드를 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

이것이 꿀꺽꿀꺽에도 적용될 수 있는지 아는 사람이 있습니까? 기본적으로 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(블롭);

작동하지 않음, 오류 발생 URL.createObjectURL은 jest 테스트 케이스 파일을 체크인하는 동안
이미지 src에 반환된 blob을 할당 하는

이것은 해키하고 권장하지 않지만 Node.js에 대해 createObjectURL 및 revokeObjectURL 의 단순화된
사용하기 전에 무엇을 하고 있는지 확인하십시오.