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

Add Save as PDF option #1349

Merged
merged 3 commits into from
Dec 11, 2019
Merged

Add Save as PDF option #1349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d5f956
Add Save as PDF option
anthony-zhou Dec 10, 2019
7612615
Merge branch 'main' into save-as-pdf
harshkhandeparkar Dec 10, 2019
5f722e5
Edit coments for consistency
anthony-zhou Dec 10, 2019
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
40 changes: 40 additions & 0 deletions examples/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ window.onload = function () {
}
else if (dropDownValue == 'save-seq') {
saveSequence();
} else if(dropDownValue == 'save-pdf') {
savePDF(getLastImage());
}
});

Expand Down Expand Up @@ -207,6 +209,44 @@ window.onload = function () {
});
}

/**
* Get the data URL for the last image in the sequence.
* @return {string} The data URL for the last image in the sequence.
*/
function getLastImage() {
// Get the image from the last step.
let imgs = document.getElementsByClassName('step-thumbnail');
let lastStepImage = imgs[imgs.length-1];
return lastStepImage.getAttribute("src");
}

/**
* Download the given image URL as a PDF file.
Copy link
Member

Choose a reason for hiding this comment

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

Remove full stop from phrases.

Copy link
Member

Choose a reason for hiding this comment

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

Isn't it a complete sentence?

Copy link
Member Author

Choose a reason for hiding this comment

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

It seems like the JSDoc examples usually look like this (they use imperative sentences).

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 you should use the @description directive instead of direct comment.

* @description Download.....

* @param {string} imageDataURL - The data URL for the image.
*/
function savePDF(imageDataURL) {
sequencer.getImageDimensions(imageDataURL, function(dimensions) {
// Get the dimensions of the image.
let pageWidth = dimensions.width;
let pageHeight = dimensions.height;

// Create a new pdf with the same dimensions as the image.
const pdf = new jsPDF({
orientation: pageHeight > pageWidth ? "portrait": "landscape",
unit: "px",
format: [pageHeight, pageWidth]
});

// Add the image to the pdf with dimensions equal to the internal dimensions of the page.
pdf.addImage(imageDataURL, 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());

// Save the pdf with the filename specified here:
pdf.save("index.pdf");
});
}



function downloadGif(image) {
download(image, 'index.gif', 'image/gif');// downloadjs library function
}
Expand Down
6 changes: 5 additions & 1 deletion examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@
<script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>

<!-- Download.js for large files -->
<script src="../node_modules/downloadjs/download.min.js" type="text/javascript" />
<script src="../node_modules/downloadjs/download.min.js" type="text/javascript" ></script>

<!-- jspdf to enable save image as pdf -->
<script src="../node_modules/jspdf/dist/jspdf.min.js" type="text/javascript" ></script>

<script src="lib/scrollToTop.js"></script>
<script src="../node_modules/selectize/dist/js/standalone/selectize.min.js"></script>
Expand Down Expand Up @@ -190,6 +193,7 @@ <h2 style="margin-top:20px">Save</h2>
<select class="form-control input-md mouse" id="selectSaveOption" style="margin-top:20px">
<option value="save-image">Save as PNG</option>
<option value="save-gif">Save as GIF (all steps)</option>
<option value="save-pdf">Save as PDF</option>
<option value="save-seq">Save sequence</option>
<option value="save-seq-string">Save sequence string</option>
</select>
Expand Down
165 changes: 163 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"jasmine": "^3.4.0",
"jquery": "^3.3.1",
"jsdom": "^15.0.0",
"jspdf": "^1.5.3",
"jsqr": "^1.1.1",
"lodash": "^4.17.11",
"ndarray": "^1.0.18",
Expand Down