I'm trying to convert html element into pdf. Everything is working fine , but it doesn't render the aws image in pdf.
Even though if i add a local path to the img src attribute then it render's that image in pdf.
const invoiceSection = $("#customer_invoice_bill");
let invoiceName = invoiceSection.data("invoiceName");
$("#btnDownloadInvoice").on("click", function () {
var pdfConf = {
pagesplit: true,
background: "#fff",
image: { type: "webp", quality: 0.98 }, // as per req
html2canvas: { dpi: 300, letterRendering: true, useCORS: true },
};
var pdf = new jsPDF("p", "pt", [
invoiceSection.height() + 100,
invoiceSection.width(),
]);
pdf.addHTML(invoiceSection, pdfConf, function () {
pdf.save(`${invoiceName}.pdf`);
});
});
this is the html element
https://i.stack.imgur.com/gEua9.png
this is how pdf is rendered without image. but it rendered the last image which is below(signature) as i have assign a local path to the src=""
https://i.stack.imgur.com/M3qrT.png
Related
I'm trying to convert a a specific set of divs into a pdf using jsPDF.
This is what I have so far.
function to convert:
makePdf() {
const pdf = new jsPDF('p', 'px', 'a4');
pdf.canvas.height = 1020;
pdf.canvas.width = 800;
const self = this;
pdf.html(this.el.nativeElement, {
callback: (pdf) => {
pdf.save("Summary.pdf")
}
})
}
How do I select the Divs I wanna convert?
I’m using DropzoneJS to facilitate the upload of files (images) as part of a .net core application. I want to be able to send the dimensions (width and height) of the file to the .net controller. But I haven’t been able to figure out how to obtain the media file dimensions after the file has been resized.
Here is the js declaration:
product_media_dropzode_ctrl = new Dropzone("#product_form_ctrl", {
paramName: "file",
maxFilesize: 3,
maxFiles: 10,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
autoProcessQueue: true,
uploadMultiple: false,
parallelUploads: 100,
resizeWidth: 1920,
resizeHeight: 1080,
resizeMimeType: 'image/jpeg',
resizeQuality: 1.0,
resizeMethod: 'crop',
accept: function (file, done) {
if (UploadedNumberFiles() > maxNumberOfMediaFile) {
done("The maximum number of files has been reached.");
}
else {
done();
}
},
init: function () {
this.on("thumbnail", function (file, dataUrl) {
**console.log("widthXheight:" + file.width + "X" + file.height);**
$('#product_width_hidden_ctrl').val(file.width);
$('#product_height_hidden_ctrl').val(file.height);
})
this.on("success", function (file, response) {
HandleUploadSuccess(response);
});
this.on('error', function (file, response) {
HandleUploadError(response);
});
},
});
}
If I upload a file 4151X2000, the file will be resized to 1920X1080, however the line below will display 4151X2000 instead of 1920X1080. If I upload a file 1800X1200, 1800X1200 is display instead of 1800X1080 which is the dimension of the file after being resized
**console.log("widthXheight:" + file.width + "X" + file.height);**
Is there a way to capture the file dimensions after the image has been resized and before the file is submitted to the server?
I am implementing direct upload with Shrine, jquery.fileupload and cropper.js
in the add portion I am loading the image from the file upload to modal, define the cropper and show the modal
if (data.files && data.files[0]) {
var reader = new FileReader();
var $preview = $('#preview_avatar');
reader.onload = function(e) {
$preview.attr('src', e.target.result); // insert preview image
$preview.cropper({
dragMode: 'move',
aspectRatio: 1.0 / 1.0,
autoCropArea: 0.65,
data: {width: 270, height: 270}
})
};
reader.readAsDataURL(data.files[0]);
$('#crop_modal').modal('show', {
backdrop: 'static',
keyboard: false
});
}
Then on the modal button click I get the cropped canvas call on it toBlob and submit to S3
$('#crop_button').on('click', function(){
var options = {
extension: data.files[0].name.match(/(\.\w+)?$/)[0], // set extension
_: Date.now() // prevent caching
};
var canvas = $preview.cropper('getCroppedCanvas');
$.getJSON('/images/cache/presign', options).
then(function (result) {
data.formData = result['fields'];
data.url = result['url'];
data.paramName = 'file';
if (canvas.toBlob) {
canvas.toBlob(
function (blob) {
var file = new File([blob], 'cropped_file.jpeg');
console.log('file', file);
data.files[0] = file;
data.originalFiles[0] = data.files[0];
data.submit();
},
'image/jpeg'
);
}
});
});
After the upload to S3 is done I am writing to image attributes to hidden field, closing the modal and destroying the cropper
done: function (e, data) {
var image = {
id: data.formData.key.match(/cache\/(.+)/)[1], // we have to remove the prefix part
storage: 'cache',
metadata: {
size: data.files[0].size,
filename: data.files[0].name.match(/[^\/\\]*$/)[0], // IE returns full path
// mime_type: data.files[0].type
mime_type: 'image/jpeg'
}
};
console.log('image', image);
$('.cached-avatar').val(JSON.stringify(image));
$('#crop_modal').modal('hide');
$('#preview_avatar').cropper('destroy');
}
An chrome everything worked fine from the very beginning, but then I figured out the safari has no toBlob functionality.
I found this one:
https://github.com/blueimp/JavaScript-Canvas-to-Blob
And toBlob is not a function error was gone..
Now I can not save the image due to some mime type related issue.
I was able to find out the exact location where it fails on safari but not chrome.
determine_mime_type.rb line 142
on line 139 in the options = {stdin_data: io.read(MAGIC_NUMBER), binmode: true}
the stdin_data is empty after the io.read
Any ideas?
Thank you!
UPDATE
I was able to figure out that the url to the cached image returned by the
$.getJSON('/images/cache/presign', options)
returns empty file when cropped and uploaded from safari.
So as I mentioned in the question safari uploaded empty file once it was cropped by cropper.js.
The problem clearly originated from this block:
if (canvas.toBlob) {
canvas.toBlob(
function (blob) {
var file = new File([blob], 'cropped_file.jpeg');
console.log('file', file);
data.files[0] = file;
data.originalFiles[0] = data.files[0];
data.submit();
},
'image/jpeg'
);
}
I found in some comment on one of the articles I read that safari does some thing like "file.toString" which in my case resulted in empty file upload.
I appended the blob directly without creating a file from it first and everything worked fine.
if (canvas.toBlob) {
canvas.toBlob(
function (blob) {
data.files[0] = blob;
data.files[0].name = 'cropped_file.jpeg';
data.files[0].type = 'image/jpeg';
data.originalFiles[0] = data.files[0];
data.submit();
},
'image/jpeg'
);
}
HERE is the code i used to download the file.
I want to upload the same file to server.
The file was created from html.
$scope.callPdf = function (studentId) {
html2canvas(document.getElementById('download'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = { content: [{ image: data, width: 450 }] };
pdfMake.createPdf(docDefinition).download(studentId + ".pdf");
}
});
}`
You can use getDataURL method and receive store it in variable and then use it for upload.
pdfMake.createPdf(docDefinition).getDataUrl(function(dataUrl){
var pdfFile = dataUrl;
//upload code goes here
});
I have been using the following code to grab a photo and display it in html works great.
function takePicture() {
navigator.camera.getPicture(
function(uri) {
var img = document.getElementById('camera_image1');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
document.getElementById('camera_status').innerHTML = "Success";
},
{ quality: 50, allowEdit: true, destinationType: navigator.camera.DestinationType.FILE_URI});
};
html later
<img style="width:144px;height:144px;" id="camera_image1" src="nophoto.jpg"/>
However I would like to save the image to the users Library at the same time, any pointer much appreciated.
I have tried using captureImage but this gives me less options like editing and did not place image inline in html.
Thanks again
PhoneGap 1.3
With Phonegap 2.2 you can save the image to the local device.
add "saveToPhotoAlbum : true" to the cameraOptions
function takePicture() {
navigator.camera.getPicture(
function(uri) {
var img = document.getElementById('camera_image1');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
document.getElementById('camera_status').innerHTML = "Success";
}, {
quality: 50,
allowEdit: true,
destinationType: navigator.camera.DestinationType.FILE_URI,
saveToPhotoAlbum : true
});
};
you'll have to change the phonegap code a bit. it wont save the image in the implementation thats there currently.
tell me if you are working on phonegap android. may be able to help u with that.