I've set up a web page that allows you to take a screenshot of a div and save it, using html2canvas to capture the image and FileSaver.js to download the file.
I can’t figure out how to make the image a jpeg instead of a png and control the quality, even though that seems to be something html2canvas can do. How do I control image type?
Here's the working code at the moment, that saves an image of the div as a png.
function generateScreenshot() {
$('#saveimagelink').click(function(e) {
e.preventDefault();
var element = document.getElementById("divtocapture");
html2canvas(element).then(function(canvas) {
canvas.toBlob(function(blob) {
window.saveAs(blob, "downloaded.png");
});
});
});
}
Thank you!
Related
I have an html page with image. The location of the image and imagename , has been given in the database table. How can I display the image by giving the image path and name from the database table using jQuery in visual studio code. Anybody can help me ?
So after getting the image src (image location and name) E.g. example.com/images/image.jpg you can then use .Append or .HTML to add the image element with that source.
If you were using AJAX to get the image source, then on the success function you can do
var imageSource = data; //data from the ajax call
$('body').append(`<img src="${imageSource}">`);
Or if you have the image already on the page, you can edit the source.
$("#imageID").attr("src", imageSource);
Your question was not very clear so I may have misunderstood your requirements.
For whatever reason, the image that I'm trying to use when sharing a link on FB doesn't load. The exact error that's being given is this:
Provided og:image, could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings.
I'm using an s3 bucket to hold my images, and as far as I'm concerned the bucket is public and I can load these images on any browser. I'm also adding the og:image, og:image:url, og:image:secure_url, og:image:height, og:image:width, and og:image:type to the meta tags, so as far as meta tags are concerned I think I've covered all grounds. Is there a particular setting that I should be adding? Thanks of any help
For other people who end up here, I encountered this issue temporarily. The Facebook Sharing Debugger fetches images asynchronously and can give false 404s.
I recommend scraping again a couple of times to confirm.
After some time I was able to solve the problem. It turns out, the FB Sharer doesn't accept base64 images. What I was doing was directly saving the base64 binary to S3, and because of that FB couldn't display the image.
So if someone out there is doing the same thing as I was, save your base64 images to file/directory first before uploading it to S3.
In my case, this was due to the Extension of the Image.
I changed .PNG to .JPEG and it starts working.
So please try to change your extension and then try again.
At first I convert HTML to canvas, then canvas to image and afterwards this image is drawn with canvas for cropping the initial image to get rid of extra space. After this is done, the image is sent to the server for storage and passed to FB in og:image meta tag.
$scope.facebookShared = () ->
$window.open "//www.facebook.com/sharer/sharer.php?u=" + encodeURI($location.absUrl()), "sharer", "toolbar=0,status=0,width=" + 500 + ",height=" + 500 /// this is window for share fb
height=$('.sharing').height()
html2canvas document.body,
onrendered: (canvas) ->
context = canvas.getContext('2d')
image = new Image()
image.src = canvas.toDataURL("image/png")
image.onload = ->
sharing=$('.sharing')
canvas.height = Math.round(sharing.width()/1.91)
canvas.width = sharing.width()
context=canvas.getContext('2d')
pos = sharing.parent(0).parent(0).position()
context.drawImage(this, pos.left, pos.top, sharing.width() + 20, sharing.height(),0,0,sharing.width()+20,sharing.height())
$.ajax
url: '../../save_img'
type: 'post'
beforeSend: (xhr) ->
xhr.setRequestHeader "X-CSRF-Token", $("meta[name=\"csrf-token\"]").attr("content")
return
data:
base64_image: canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "")
claim_slug: $scope.claim.slug
return false
width: $('.claim-page ').width()
height: height+115
return
I am using 'SwiftSoup' SDK to parse HTML content from UIWebView. I want the image size and resolution for each and every image fetched from HTML content. How to get the image size and resolution as soon as an image is loaded and from HTML content received from SwiftSoup?
Assuming you know when all images from the HTML are loaded, here's a javascript code that can be used to grab a list of sizes for all images:
let script = "JSON.stringify([].slice.call(document.getElementsByTagName('img')).map(function(img) { return {url: img.src, width: img.clientWidth, height: img.clientHeight} }))"
Executing this javascript via stringByEvaluatingJavaScript(from:) should give you a JSON that you can parse to obtain the desired info.
For example the output for this page is
[{"url":"https://i.stack.imgur.com/rQQMq.png?s=48&g=1","width":24,"height":24},{"url":"https://www.gravatar.com/avatar/46be6ae9d14855f5ab1aaf1d510ab8bc?s=32&d=identicon&r=PG&f=1","width":32,"height":32},{"url":"https://clc.stackoverflow.com/impression.gif?an=49ocs77evOWqh-6LVv8gJiaWI_07xL9f6GBcyDt7dl3NWtNsxo9-twOOBzKwMPRsYGBosGdkZGCRZuqawDHjMeecj4L_WRhSDiyObbJ82JRhP5vp7j6Og2e4ru0W9mRhmNs0gbnc8pVcsT0jc2Z-sTTTwxaOliucyy4LsrAwFLRcfRVt-e6KDEjTco4LjVyda4XkgZqaJcJzLa9Oj4RoMrJk4eJgYpBgYGDg4o1ij5VnYhAHsvk4o9gSmZgYRIBsfmYbtrvCTAxiIHH2ALapwv3t9i1z_NRrAA&md=291","width":0,"height":0}]
I'd recommend though to switch to WKWebView since it's recommended also by Apple, and because stringByEvaluatingJavaScript(from:) is blocking (WKWebView provides an async version of this function, and one that also will do the parsing for you, so you can remove the JSON.stringify() call from the script).
I am working on create an extension. My content got a upload part to upload image in the backend. I want to get that uploaded image to use as background image in css. Are there any ways to get the upload image url and which between inline css and css file which one i should use in this situation?
My element i want to set the background image:
I would prefer to use inline styles for the background image. You can get the URL of the image with the f:uri.image view helper:
<div style="background-image:url({f:uri.image(src: '{imageField}')});">
I am trying to take a screenshot of a div on my webpage using html2canvas.
In the html2canvas documentation it is stated that:
The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe content either, unless the content resides under the same origin.
My div contains same-origin iframes, but the iframes dont appear in the screenshot.
My script:
$('#savetopdf').click(function () {
html2canvas($('#dashboard'), {
"logging": true,
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
});
Unfortunately this is not implemented, any more.
I had the same issue and submitted it as a bug/feature request.
https://github.com/niklasvh/html2canvas/issues/376
The owner of the project stated:
niklasvh
There is currently no support for rendering iframe's even if the reside under same origin.