I tried to use html2canvas to get image screenshot byte from website. However, the screenshot result ended with poor resolution. Looking for advice to improve screenshot quality. Thanks.
How about something like this:
var $wrapper = $("#yourDiv");
setSize($wrapper, "2000px", "20pt");
html2canvas($wrapper, {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpg");
a.download = 'filename.jpg';
a.click();
setSize($wrapper, "1000px", "10pt");
}
});
function setSize(dv, width, fontsize) {
dv[0].style.width = width;
dv[0].style.fontSize = fontsize;
}
This resizes the div and font to bigger size and then shrinks back afterwards.
Related
I have been searching and testing for hours and cant seem to find a solution. I need to convert a html div with a jschart to an image. I am using the below code to create the image but the quality is very low. I am using version 0.4.1, for some reason the newest version of html2canvas is not working..
Anybody found a solution to this?
function saveAsImage() {
var $wrapper = $("#ReportContainer");
html2canvas($wrapper, {
onrendered: function(canvas) {
var link = document.createElement('a');
link.href = canvas.toDataURL('image/jpeg');
link.download = 'myChart.jpeg';
link.click();
}
});
}
I'm doing an experiment with gifshot and leafletjs. I want to insert an image inside a marker popup but the problem is that the popup will not adapt his size to fit the content. I've tried to apply some css rules but it will not be displayed on the marker that is present on the map, I need some tips and help to fix this.
Here is an image that is showing my problem:
var animatedImage;
map.on('click', function(event){
marker = map.mouseEventToLatLng(event.originalEvent);
var icns = L.marker([marker.lat, marker.lng]).addTo(map);
sessionStorage.setItem('lat', marker.lat);
sessionStorage.setItem('lng', marker.lng);
gifshot.createGIF({}, function(obj){
if(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
icns.bindPopup(animatedImage).openPopup();
}
});
});
Any help will be appreciated.
So I have an array of images I want to load into a gallery using Photoswipe, but I'm having trouble predefining the image width and height. Specifically, I think I need to preload the images
Here's my JS to render the page, here I'm defining slides and listing as a local variable for the ejs page to use:
var sizeOf = require('image-size');
var url = require('url');
var http = require('http');
var slideshow = [];
for(var i = 0; i < listing.listing_images.length; i++) {
var image = listing.listing_images[i];
var width, height = 0;
var imgUrl = image.url;
var options = url.parse(imgUrl);
http.get(options, function (response) {
var chunks = [];
response.on('data', function (chunk) {
chunks.push(chunk);
}).on('end', function() {
var buffer = Buffer.concat(chunks);
**height = sizeOf(buffer).height;
width = sizeOf(buffer).width;**
});
});
var item = {
src: image.url,
h: height,
w: width
};
slideshow.push(item);
}
res.render('example.ejs', {
listing: listing,
slides: slideshow
});
And here is the script in the ejs page :
<% var slides = locals.slides %>
<script>
$('document').ready(function() {
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array using slideshow variable
var items = <%- JSON.stringify(slides) %>;
console.log(items);
// grab image
if (items.length > 0) {
// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: 0 // start at first slide
};
// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
</script>
Basically what's happening is the array of photoswipe items is being passed in fine, but the width and height aren't set until photoswipe initializes and triggers the img to load. So the images don't show, because their height and width aren't set yet.
Is there a way to trigger the loading of the images in the slideshow array so that the width & height are set before passing to Photoswipe? I've also tried seeing if I could just set them initially to 0, and then try and update the height and width later and try to force photoswipe to reload, but photoswipe doesn't recognize the image's new height/width.
Sorry if any of this is unclear/muddled with ejs nonsense, feel free to ask anything and I'd love to clarify.
Thanks
Ended up solving this leveraging the API:
gallery.listen('gettingData', function(index, item) {
// index - index of a slide that was loaded
// item - slide object
var img = new Image();
img.src = item.src;
item.h = img.height;
item.w = img.width;
});
gallery.invalidateCurrItems();
// updates the content of slides
gallery.updateSize(true);
If anyone happens to be reading this and there's a better way to read image size without creating a new img, or optimize this I'd love suggestions. :)
I am using the following code to save the content of div (image and text) as an image using html2canvas.
$(function() {
$("#save").click(function() {
var flag = true;
var imgpath = document.getElementById('file').value;
if(imgpath.length == 0)
{
alert('Please select image file to upload.');
flag = false;
}
else
{
html2canvas($('.body740'), {
onrendered: function(canvas) {
theCanvas = canvas;
var url = canvas.toDataURL("image/png");
var br = document.createElement("br");
var center = document.createElement("center");
var newImg = document.createElement("img"); // create img tag
newImg.src = url;
$(".body740").hide();
$("#canvas").show(); //div where the final image is shown
document.getElementById("rsimg").src=url;
document.getElementById("rsa").href=url;
}
});
}
});
});
This is my link : http://www.aamras.com/greetings2/
But, when I click the save image button, it takes a lot of time to generate the image. Why is it taking so much time to load? What is the issue?
Solved : Change the version of html2cannvas. I was previously using html2canvas 0.5.0-alpha 2014 version
I Switched to html2canvas 0.5.0-alpha1. It generates the image properly and takes no time to do so. You can download the files from https://github.com/niklasvh/html2canvas/releases
I'm trying to combine jcrop and scrimage but I'm having trouble in understanding
the documentation of scrimage.
The user uploads an image. When the upload is done the user is able choose a fixed
area to crop with Jcrop:
upload.js
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#progress").find(".progress-bar").css(
"width",
progress + "%"
);
},
done: function (e, data) {
$("#cropArea").empty();
var cropWidth = 210;
var cropHeight = 144;
if(data.result.status == 200) {
var myImage = $("<img></img>", {
src: data.result.link
}).appendTo('#cropArea');
var c = myImage.Jcrop({
allowResize: false,
allowSelect: false,
setSelect:[0,0,cropWidth,cropHeight],
onSelect: showCoords
});
}
}
});
});
Example:
When the user is satisfied the coordinates will be posted to the server and there is where the magic should happen.
Controller:
def uploadFile = Action(multipartFormDataAsBytes) { request =>
val result = request.body.files.map {
case FilePart(key, filename, contentType, bytes) => {
val coords = request.body.dataParts.get("coords")
val bais = new ByteArrayInputStream(bytes)
Image(bais).resize(magic stuff with coords)
Ok("works")
}
}
result(0)
}
If i read the docs for scrimage and resize:
Resizes the canvas to the given dimensions. This does not scale the
image but simply changes the dimensions of the canvas on which the
image is sitting. Specifying a larger size will pad the image with a
background color and specifying a smaller size will crop the image.
This is the operation most people want when they think of crop.
But when trying to implement resize with an inputstream Image(is).resize() I'm not sure I how should do this. Resize takes a scaleFactor, position and color... I guess I should
populate the position with the coords I get from jcrop??, and what do I do with the scaleFactor? Anybody got a good example of how to do this this?
Thank you for two great libs!
Subimage is what you want. That lets you specify coordinates rather than offsets.
So simply,
val image = // original
val resized = image.subimage(x,y,w,h) // you'll get these from jcrop somehow