Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert url to blob for large file size download #1455

Merged
merged 5 commits into from
Mar 11, 2021
Merged

Convert url to blob for large file size download #1455

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9ca32a8
Convert url to blob for large size download
ataata107 Jan 11, 2020
8b0eee0
Merge branch 'main' into download-large
harshkhandeparkar Jan 11, 2020
d4e56a0
Replaced var with let
ataata107 Jan 11, 2020
c044512
Merge branch 'download-large' of https://github.com/ataata107/image-s…
ataata107 Jan 11, 2020
17ac4bf
Merge branch 'main' into download-large
jywarren Mar 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions examples/lib/defaultHtmlStepUi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,12 +339,24 @@ function DefaultHtmlStepUi(_sequencer, options) {

$stepAll('.download-btn').on('click', () => {

function dataURLtoBlob(dataurl) {
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}

var element = document.createElement('a');
element.setAttribute('href', step.output);

element.setAttribute('download', step.name + '.' + fileExtension(step.imgElement.src));
element.style.display = 'none';
document.body.appendChild(element);

var blob = dataURLtoBlob(step.output);
var objurl = URL.createObjectURL(blob);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the difference between this URL and dataURL?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just encountered this in https://github.com/jywarren/bookletize.js and data urls have a length limit in browsers, so they fail on large files, and also blob is more efficient because they don't need to be reencoded.

I think this is probably worth it!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we internally use blobs too, then?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's possible. We had very very long ago considered different formats for between-module data handoff, including possibly buffers...? i forget, but it was in our very first issue: #1 (comment)

We could open a new issue with this idea -- basically that default is data-urls, because strings are completely compatible, but if two modules can negotiate that both are compatible with blobs, that's OK too. I think the data-urls worked especially well because they had to be displayed anyways. But now that I think of it I think it's possible to display a blob as well in the browser. Please feel free to open an issue to discuss this!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also note https://stackoverflow.com/questions/7650587/using-javascript-to-display-a-blob

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this would just work, but it depends on the run environment, I imagine:

image-sequencer/src/Run.js

Lines 18 to 54 in 5298d1e

var i = drawarray[pos].i;
var input = ref.steps[i - 1].output;
var step = ref.steps[i];
step.getStep = function getStep(offset) {
if (i + offset >= ref.steps.length) return { options: { name: undefined } };
else return ref.steps.slice(i + offset)[0];
};
step.getIndex = function getIndex() {
return i;
};
for (var util in getStepUtils) {
if (getStepUtils.hasOwnProperty(util)) {
step[util] = getStepUtils[util];
}
}
// Tell UI that a step is being drawn.
step.UI.onDraw(step.options.step);
// provides a set of standard tools for each step
var inputForNextStep = require('./RunToolkit')(ref.copy(input));
step.draw(
inputForNextStep,
function onEachStep() {
// This output is accessible by UI
ref.steps[i].options.step.output = ref.steps[i].output.src;
ref.steps[i].options.step.wasmSuccess = ref.steps[i].output.wasmSuccess || false;
ref.steps[i].options.step.useWasm = ref.steps[i].output.useWasm || false;
// Tell UI that step has been drawn.
ref.steps[i].UI.onComplete(ref.steps[i].options.step);
drawStep(drawarray, ++pos);

We could add a parameter to drawStep somewhere that evaluates whether the neighboring steps can both handle blobs.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I broke this into an issue at #1847 !!

element.setAttribute('href', objurl);

element.click();
});

Expand Down