I have a div that i want to screenshot and save,
here is my code
function _download(uri, filename)
{
var el = $('.sf-download-button');
if (el.length)
{
var link = document.createElement('a');
if (typeof link.download === 'string')
{
link.href = uri;
link.download = filename;
document.body.appendChild(link);
//simulate click // this causes page to download an empty html file not sure why
link.click();
//remove the link when done
document.body.removeChild(link);
}
else
{
window.open(uri);
}
}
}
function _save()
{
window.takeScreenShot = function ()
{
var a =document.getElementById("my-div");
html2canvas(document.getElementById("the-div-that-i-want-to-screenshot"), {
onrendered: function (canvas)
{
document.body.appendChild(canvas);
a.append(canvas);
},
width: 220,
height: 310
});
};
$("#btnSave2").click(function ()
{
html2canvas(document.getElementById("data"), {
onrendered: function (canvas)
{
_download_card(canvas.toDataURL(), 'save.png');
}
});
});
}
This is the code i got it from web and added some of my own stuff.code was working i believe but right now, when I click on the button show me the image, it creates the image i can see it but it is just blank.
I tried every possible code combination from jsfiddle and all that and couldn't get anything different as a result.
What could be going wrong here?
I solved the problem by simply changing the browser,
It was not working with Chrome but works perfectly on Mozilla.
Also i changed the code to this,
$("#btnSave").click(function() {
html2canvas($("#card"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
Works perfect on Mozilla only.
Related
I'm trying to take a screen shot of a map that uses dash-leaflet. When the screen shot it taken with html2canvas, the overlay on the map is moved upward and to the left. I have been trying to correct this but the html2canvas documentation is pretty sparse, and I'm not sure what will correct the issue.
$(document).ready(function () {
$(document).on('click', "#btn-frame-download", function () {
var element = document.getElementById("graph-collection"); // global variable
if (element == null) {
element = document.getElementById("prob-graph"); // global variable
if (element == null) {
element = document.getElementById("was-graph"); // global variable
}
}
getCanvas(element);
});
});
function getCanvas(element) {
html2canvas(element, {
scrollX: 0,
scrollY: 0,
allowTaint: true,
useCORS: true,
async: false,
width: element.clientWidth,
height: element.clientHeight,
logging: true,
imageTimeout: 0,
}).then(function (canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
}
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
download-img.js [+]
Original
Output by html2canvas
Above you can see the how the screen looks in it's original format, and then what is output by html2canvas. Any tips would be greatly appreciated.
I am new to html2canvas. So please don't mind if I am asking silly question. I can generate image using html2canvas.
My code:
$(document).ready(function() {
$('#save_image_locally').click(function(){
html2canvas($('#html-content-holder'), {
onrendered: function (canvas) {
var a = $("<a>").attr("href", canvas.toDataURL('image/png')) .attr("download", "download.png").appendTo("body");
a[0].click();
a.remove();
}
});
});
});
I have written a basic after hook in cucumberjs for some reason , it is not working as expected.It is supposed to attached screenshot and write browser console log , when scenario fails. But it attaches the screen shot after the feature in html report and prints the browser console log at after in between the second scenarioenter image description here.Any clue what's wrong??
this.After(function(scenario, callback) {
if (scenario.isFailed()) {
global.browser.takeScreenshot().then(function(base64png) {
var decodedImage = new Buffer(base64png,'base64').toString('binary');
scenario.attach(decodedImage, 'image/png');
});
global.browser.manage().logs().get('browser').then(function (browserlog){
browserlog.forEach(function (log) {
if (log.level.value > 900) {
console.error(log.message.substring(log.message.indexOf('Error'),log.message.indexOf('\n')))
}
})
});
callback();
} else {
callback();
}
});
According to the cucumberjs github page https://github.com/cucumber/cucumber-js#attachments
Images and other binary data can be attached using a stream.Readable. In that case, passing a callback to attach() becomes mandatory:
You could split the single after hook into two separate hooks:
this.After(function(scenario, next) {
browser.takeScreenshot().then(function(png) {
var decodedImage = new Buffer(png, 'base64').toString('binary');
scenario.attach(decodedImage, 'image/png', next);
}, function(err) {
next(err);
});
});
this.After(function(scenario, next) {
global.browser.manage().logs().get('browser').then(function (browserlog){
browserlog.forEach(function (log) {
if (log.level.value > 900) {
console.error(log.message.substring(log.message.indexOf('Error'),log.message.indexOf('\n')))
}
});
});
});
One of js on my website causes unnecessary scroll to top of page. How to make a break in Chrome Developers Tools when js is changing scrollTop property?
Paste the code below and then run onVerticalScroll(function(){debugger});.
Note that this will only pause when the scroll position is set explicitly via JavaScript. For example, it won't trigger if a large element temporarily disappears from the page and causes the viewport to jump up.
function onVerticalScroll(fnOnScroll){
var originalScrollTop = getPropertyDescriptor(HTMLElement.prototype, "scrollTop");
Object.defineProperty(HTMLElement.prototype, "scrollTop", {
get: function(){
return originalScrollTop.get.apply(this, arguments);
},
set: function(){
fnOnScroll();
return originalScrollTop.set.apply(this, arguments);
}
});
var originalScrollTo = window.scrollTo;
window.scrollTo = function(){
fnOnScroll();
return originalScrollTo.apply(this, arguments);
}
var originalScrollBy = window.scrollBy;
window.scrollBy = function(){
fnOnScroll();
return originalScrollBy.apply(this, arguments);
}
function getPropertyDescriptor(object, propertyName){
var descriptor = Object.getOwnPropertyDescriptor(object, propertyName);
if (!object){
throw new Error("descriptor not found");
}
if (!descriptor) {
return getPropertyDescriptor(Object.getPrototypeOf(object), propertyName);
}
return descriptor;
}
}
I need some help with Javascript to get fancybox working with SCP. The following solution has not worked for me although I'm aware I'm missing some fundamental code. The first product image works perfectly opening the fancybox lightbox but once you select from the configurable dropdowns it changes the image which then does not call the lightbox and opens in the browser.
SCP advice is:
To fix, it's often just a matter of editing the showFullImageDiv function in the scp_product_extension.js file: Change evalScripts to true if it's not already, and possibly you'll also need to remove the code which exists in a few places which looks like: product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
I tried this but it's not just a simple matter of removing "product_zoom..." my understanding is that fancybox needs to be called replace this line of code.
Original:
Product.Config.prototype.showFullImageDiv = function(productId, parentId) {
var imgUrl = this.config.ajaxBaseUrl + "image/?id=" + productId + '&pid=' + parentId;
var prodForm = $('product_addtocart_form');
var destElement = false;
var defaultZoomer = this.config.imageZoomer;
prodForm.select('div.product-img-box').each(function(el) {
destElement = el;
});
if(productId) {
new Ajax.Updater(destElement, imgUrl, {
method: 'get',
evalScripts: true,
onComplete: function() {
//Product.Zoom needs the *image* (not just the html source from the ajax)
//to have loaded before it works, hence image object and onload handler
if ($('image')){
var imgObj = new Image();
imgObj.src = $('image').src;
imgObj.onload = function() {product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint'); };
} else {
destElement.innerHTML = defaultZoomer;
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint')
}
}
});
} else {
destElement.innerHTML = defaultZoomer;
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
}
};
I know I need to call fancybox in the below locations but not sure how to go about it. From what I understand fancybox is called on pageload so not sure imgObj.onload will even work?
Product.Config.prototype.showFullImageDiv = function(productId, parentId) {
var imgUrl = this.config.ajaxBaseUrl + "image/?id=" + productId + '&pid=' + parentId;
var prodForm = $('product_addtocart_form');
var destElement = false;
var defaultZoomer = this.config.imageZoomer;
prodForm.select('div.product-img-box').each(function(el) {
destElement = el;
});
if(productId) {
new Ajax.Updater(destElement, imgUrl, {
method: 'get',
evalScripts: true,
onComplete: function() {
//Product.Zoom needs the *image* (not just the html source from the ajax)
//to have loaded before it works, hence image object and onload handler
if ($('image')){
var imgObj = new Image();
imgObj.src = $('image').src;
imgObj.onload = CALL FANCYBOX
} else {
destElement.innerHTML = defaultZoomer;
CALL FANCYBOX
}
}
});
} else {
destElement.innerHTML = defaultZoomer;
CALL FANCYBOX
}
};
Unfortunately my javascript is very basic and any help on what I need to add would be gratefully received. I found a few posts with the same issue but no solution.
Thanks