Model-viewer: Improving the screenshot API using toBlob instead of toDataURL

[sleroux]

Description

<model-viewer> added the toDataURL API method as part of https://github.com/GoogleWebComponents/model-viewer/issues/596 to make it easier to extract the shadow DOM's canvas element but one of the issues with toDataURL is that it is sync and blocks the page while generating the data.

Canvas's toBlob API can do the same thing as toDataURL with the benefit of being async and prevent page blocking. The only wrinkle is that toBlob isn't supported on Edge browsers. Would it be possible to have the toDataURL API make use of toBlob if available with an async interface while still falling back ontoDataURL for unsupported (cough edge) browsers?

/cc @pushmatrix

[cdata]

@sleroux thanks for the feature request! That's a great idea.

I think what I would suggest we do is implement a small toBlob fallback for cases like Edge. The implementation would be small enough that it probably doesn't warrant a full-on polyfill.

For example, you can see a suggestion to patch HTMLCanvasElement.prototype in this Stack Overflow answer: https://stackoverflow.com/a/47487073/391852

Rather than patch the prototype of HTMLCanvasElement, we could just build this into ModelViewerElementBase, that way we don't intrude on built-in implementation.