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();
}
});
});
});
Related
I want infinite scrolling of product on category page but load more not working. I'm using porto theme.
Referece: https://prnt.sc/qvimev
<script>
require(["jquery"], function($) {
var url = $('.next').attr('href');
if (typeof url === "undefined") {
$('#load-more-product').html('');
}
$('#load-more-product-link').on('click', function() {
var url = $('.next').attr('href');
$('#load-more-product').hide();
$('#load-more-loader').show();
$.get(url, function(data) {
$('#load-more-loader').hide();
$('#load-more-product').show();
var result = $(data).find('.item.product.product-item');
var nxtUrl = $(data).find('.next').attr('href');
result.each(function(index, value) {
$('.products.list.items.product-items').append(value);
$("form[data-role='tocart-form']").catalogAddToCart();
});
if (typeof nxtUrl === "undefined") {
$('#load-more-product').html('<em>No More product in this Category.</em>');
} else {
$('.next').attr('href', nxtUrl);
}
});
});
});
</script>
Load More Infinite scroll is depends on Mageplaza Extension . so you need to make sure that Porto theme Mageplaza_LayeredNavigation Extension should be enabled
I use this code from taking a screenshot & save it to pdf, I want to control the screenshot size like 400x700px.
<script type="text/javascript">
function genPDF() {
html2canvas(document.getElementById("all_content"), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',20,20);
doc.save("Businesscard-<?php echo $sss_name; ?>.pdf");
}
});
}
</script>
Add height and width attribute to get you desired outcome :
function genPDF() {
html2canvas(document.getElementById("all_content"), {
onrendered: function (canvas) {
canvas.setAttribute('width',400); /*this->add*/
canvas.setAttribute('height',700); /*this->add*/
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG');
doc.save("Businesscard-<?php echo $sss_name; ?>.pdf");
}
});
}
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.
I added the meteorhacks:npm package and installed fbgraph using:
$ npm install fbgraph
My server side code looks like this for now:
function Facebook(accessToken) {
this.fb = Meteor.npmRequire('fbgraph');
this.accessToken = accessToken;
this.fb.setAccessToken(this.accessToken);
this.options = {
timeout: 3000,
pool: {maxSockets: Infinity},
headers: {connection: "keep-alive"}
}
this.fb.setOptions(this.options);
}
Facebook.prototype.query = function(query, method) {
var self = this;
var method = (typeof method === 'undefined') ? 'get' : method;
var data = Meteor.sync(function(done) {
self.fb[method](query, function(err, res) {
done(null, res);
});
});
return data.result;
}
Facebook.prototype.getUserData = function() {
return this.query('me');
}
Facebook.prototype.getFriendsData = function() {
return this.query('/me/friendlists');
}
Meteor.methods({
getUserData: function() {
var fb = new Facebook(Meteor.user().services.facebook.accessToken);
var data = fb.getUserData();
return data;
},
getFriendsData: function() {
var fb = new Facebook(Meteor.user().services.facebook.accessToken);
var data = fb.getFriendsData();
return data;
}
});
Meteor.publish("getUserData", function () {
return Meteor.users.find({_id: this.userId});
});
Meteor.publish("getFriendsData", function(){
return Meteor.users.find({_id: this.userId});
});
My config.js is also in order I think:
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY",
requestPermissions: {
facebook: ['email', 'user_friends'],
}
});
On the client side I have a template:
<template name="friends">
<div class="container">
{{friendlist}}
</div>
</template>
And I'm attempting to call 'getFriendsList' with:
Template.friends.helpers({
friendlist: function() {
Meteor.call("getFriendsData");
}
});
Finally, my packages.json looks like this:
{
"fbgraph": "1.1.0"
}
When I try to run my app, I get an error as follows:
Exception while simulating the effect of invoking 'getFriendsData
TypeError: Meteor.npmRequire is not a function
I apologize if this is a stupid question, I'm fairly new to Meteor. And I for the life of me can't figure this one out. I'd really appreciate some help.
You need to add the npm module. Integration of npm modules isn't native to meteor with the meteorhacks:npm module. Install it with this command:
meteor add meteorhacks:npm
Whenever you add a non-meteor package via npm, you will have to use Meteor.npmRequire(). If you install via meteor add foobar you won't need to require the package.
If you have problems, try this if you are using Meteor 1.2:
rm -rf packages/npm-container
meteor remove npm-container
meteor update meteorhacks:npm
Also your template needs fixing, as it's currently not going to update based on your Meteor.call(). If you use onCreated() or onRendered() you can trigger the Meteor.call() and set a session variable that will be used by one of your helpers to populate your template:
Template.friends.onCreated(function() {
Meteor.call("getFriendsData", function(error, friends) {
if (error) {
console.log(error);
} else {
Session.set('friends', friends);
}
});
});
Template.friends.helpers({
friendlist: function() {
return Session.get('friends');
}
});
If you aren't getting anything back, change this to check if you are getting data back on the server side:
getFriendsData: function() {
console.log(Meteor.user().services.facebook.accessToken);
var fb = new Facebook(Meteor.user().services.facebook.accessToken);
var data = fb.getFriendsData();
console.log(data);
return data;
}
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