I need to export a page that contain leaflet map to pdf. I tried to convert the map container to image but thats not working perfectly.
The code I used is here
http://jsfiddle.net/Sq7hg/2/
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
console.log(data)
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
This code not working perfectly for leaflet map.How can I implement this ?
I think you'd better off using leaflet-image plugin, which does exactly that. There is a demo linked from the header. The main catch is forcing Leaflet to use canvas for rendering.
I had a problem to export the leaflet map with special markers, I tried to use the plugin leaflet-image but it works only with standard markers.
At the end I created the map in the server (Node).
I wrote a post, How to export the leaflet map to pdf, see link below
Export leaflet map to pdf report
Related
How I can get the image that the user just uploaded to display in another element on the same page? I'm using the storeAsFile property within the filePond options.
As note, I'm currently displaying the image with ImagePreview plugin within the filepond input instance, but i want to show this image on another part of the page. Hope i'm being clear enough.
Found the solution,
pondPhoto.on('addfile', (error, file) => {
// this object contains the file info
console.log(file.file)
// you can construct a blob object
const imageSrc = URL.createObjectURL(file.file)
// then you may attach it to any image in your DOM
document.querySelector('img').setAttribute('src', imageSrc)
})
I'm working on a project that uses express.js for backend and the ejs rendering template for frontend. I've uploaded some images using filepond and the images were converted to base64. However, while viewing the output on the browser, the images look as though they're broken (with a small square at the top-left corner).
I need help with getting this fixed. Here's the code for the function to save the images and convert to base64:
function saveCover(book, coverEncoded) {
if (coverEncoded == null) return;
const cover = coverEncoded;
if (cover != null && imageMimeTypes.includes(cover.type)) {
book.coverImage = new Buffer.from(cover.data, "base64");
book.coverImageType = cover.type;
}
}
The problem I believe will be coming from how you are retrieving the image. If the code you've shown above saves the image (i.e you are seeing some data in the database), then you should focus your attention on the code that retrieves the image to display on the webpage.
Currently, I am Working on image editor that allows me to crop an image and apply a filter.
I am using fabric js version 1.7.22.
I want to implement crop functionality.
so my cropping flow is like Below :
crop image using a plugin and ger base64 of the cropped image.
generate blobUrl from base64 which help to display image in fabric js canvas.
After Cropping the image, I Just replace old image src with new One.
It works fine when an image has no filter.
but when I try to set a filter in the image first then try to replace src using setSrc() function.
It throws an error like Below
filter.applyTo is not a function
I have created one fiddle for demonstrating to replace src after the apply filter.
https://jsfiddle.net/Mark_1998/98gLhcb4/1/
And I Can't upgrade my fabric js version. If any patch Available then
Please Help Me.
The problem lies in this piece of code:
canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
canvas.renderAll();
}, canvas.getActiveObject().toObject());
You're passing canvas.getActiveObject().toObject() as an options object, which is assigned to your image in setSrc() -> setElement() -> _initConfig().
toObject() serializes your fabric.Image, and filters array no longer contains the actual fabric.Filter, but rather a serialized version of it. So, it does not have a prototype with applyTo() method on it, hence the error filter.applyTo is not a function when fabric tries to reapply filters to your image after setSrc().
Instead of passing the whole serialized object as options, you'll need to pick the properties you actually want to be passed. As I'm not sure about what your requirements are, I tried replacing the above code with the following and it worked for me:
var options = canvas.getActiveObject().toObject();
delete options.filters;
options.crossOrigin = true;
canvas.getActiveObject().setSrc('http://fabricjs.com/assets/pug_small.jpg', function(){
canvas.renderAll();
}, options);
Note the options.crossOrigin = true - you won't be able to apply filters without it.
I have a Xamarin WindowsRT project where I am able to load a local PDF and view it within the WebView of the app using PDF.js.
I have created a custom renderer to override the Xamarin WebView and I simply call:
Control.Source = new Uri("ms-appx-web:///Assets/pdf/pdfjs/web/viewer.html?file=mypdf.pdf");
And this works great for opening and viewing the PDF.
The thing is, the PDFs I will need to view are in the form of base64 encoded strings downloaded from a server. Is there a way to pass the base64 to PDF.js somehow?
Update:
Just to see if I can get this working using javascript, I am loading a basic html page into the webview with the following script, but I just get a blank page:
<script>
var pdfAsArray = convertDataURIToBinary('data:application/pdf;base64,JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
PDFJS.getDocument(pdfAsArray);
</script>
I know the html page is loading because above the script i put TEST and that renders. And it is executing the javascript. It is also properly creating the pdfAsArray, because I also iterated through it and it has a lot of values.
Fetch your pdf string using C# and then inject it as a variable in your WebView in order to pass it (since you're using Xamarin.Forms, you can use HybridWebView's InjectJavaScript)
Then, use the function from this gist to convert that string into an array that can be accepted by pdf.js, as pointed in this answer.
var pdfAsDataUri = //Your string;
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
PDFJS.getDocument(pdfAsArray)
You can also create a function that wraps the conversion and the PDFJS.getDocument and call it directly from C#:
//JS
function loadPdfFromBase64(pdfString) {
var pdfAsArray = convertDataURIToBinary(pdfString);
PDFJS.getDocument(pdfAsArray)
}
//C#
hybridWebView.CallJsFunction("loadPdfFromBase64", yourPdfString);
i would to convert chart to image, iwish that can saving to png or jpeg
how to save kendo ui chart to image using PHP or java script
Have a look at these:
http://docs.kendoui.com/api/dataviz/chart#methods-svg
http://docs.kendoui.com/api/dataviz/chart#methods-imageDataURL
I've had mixed success with the svg export, but to be fair mine wasn't an "out-of-the-box" scenario.
With HTML 5 you can use this JavaScript:
var image = chart.imageDataURL(); //Kendo UI
var a = $("<a>").attr("href", image).attr("download", "img.png").appendTo("body");
a[0].click();
a.remove();