Develop Reference

show each div content individually in each page

I am exporting the data present inside the div to PDF when user click on the export button. I want to show each div content to show in individual pages inside the PDF.
The above scenario is working in the demo https://plnkr.co/edit/KvkVlYmmmJiZ71sghb1l?p=preview
The same when applied to below code, it is not working.
Demo here : https://plnkr.co/edit/P9nUSRY5TytkonM6dUHl?p=preview
js code:
$scope.export = function() {
var pdf = new jsPDF('landscape');
var source = $('#append-source');
$('.myDivClass').each(function(){
var html = "<div>"+$(this) + "</div><!--ADD_PAGE-->";//the code is broken with this line
// var html = $(this);
source.append(html);
});
console.log(source);
pdf.addHTML(
source, 0, 0, {
pagesplit: true
},
function(dispose){
pdf.save('test3.pdf');
}
);
}

It is not recommended to use jquery like this inside an angular app. To see why look here: Can we use both jQuery and Angular in our Web Application?
However what you want to do is possible if you put the following into your controller:
$scope.export = function() {
var pdf = new jsPDF('landscape');
var source = "";
var width1 = pdf.internal.pageSize.width;
$('.myDivClass').each(function(){
var textForPdfPage = $(this).children().eq(1).children()[0].textContent;
var html = "<div>"+ textForPdfPage + " </div><!--ADD_PAGE-->";
source+=html;
});
margins = {
top: 80,
bottom: 60,
left: 10,
width: '100%'
};
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': width1 // max width of content on PDF
},
function (dispose) {
pdf.save('test.pdf');
},
margins
);
}
Your main problem is that when you where trying to create your html string you only used $(this). $(this) gives you a jquery object. The string you want to put on the page is inside this object and is accessed using the jquery .children() method.

Here is a way of doing what you asked using addHTML() instead of fromHTML():
$scope.export = function() {
var pdf = new jsPDF('landscape');
var pdfName = 'test.pdf';
var options = {};
var $divs = $('.myDivClass') //jQuery object of all the myDivClass divs
var numRecursionsNeeded = $divs.length -1; //the number of times we need to call addHtml (once per div)
var currentRecursion=0;
//Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
pdf.save(pdfName);
}else{
currentRecursion++;
pdf.addPage();
//$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
//addHtml requires an html element. Not a string like fromHtml.
pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
console.log(currentRecursion);
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
});
}
I left the other answer so people can see both ways of doing it.

How to convert canvas to SVG with embedded image base64 in fabricjs

I have fabricjs canvas with image, which I loaded by fabric.Image.fromURL() method.
I need export it to SVG, but I want to export image as embedded source in base64, not as a link.
How can I do it? Is it any way to load image as a source not as a link?
Example code:
Loading image:
fabric.Image.fromURL('./assets/people.jpg', function (image) {
image.set({
left: 10,
top: 30
});
canvas.add(image);
};
Exporting to SVG:
canvas.toSVG();
In exported SVG I have:
<image xlink:href="http://localhost:8383/app/assets/people.png" />
But I want it in base64 like:
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAe8AAAKuCAYAAACIZZSZAAAAAXNSR0IArs4c6QAAAARnQU1BAACx(...)" />

There is no option but you can easily achieve it like this:
Image has a method that is called 'getSvgSrc';
override it like this:
fabric.Image.prototype.getSvgSrc = function() {
return this.toDataURLforSVG();
};
fabric.Image.prototype.toDataURLforSVG = function(options) {
var el = fabric.util.createCanvasElement();
el.width = this._element.naturalWidth || this._element.width;
el.height = this._element.naturalHeight || this._element.height;
el.getContext("2d").drawImage(this._element, 0, 0);
var data = el.toDataURL(options);
return data;
};
In this way you should be able to obtain an integrated image for the svg.

you can use the toSVG method :
rasterizeSVG () {
let w = window.open('')
w.document.write(this.canvas.toSVG())
return 'data:image/svg+xml;utf8,' + encodeURIComponent(this.canvas.toSVG())
}
or :
rasterize() {
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
var image = new Image();
image.src = this.canvas.toDataURL('png')
var w = window.open("");
w.document.write(image.outerHTML);
}
}

PDFJS is not defined in pdf.worker.js (Backbone+Marionette+pdf.js)

I want to render a PDF inside a Backbone.js/Marionette View with pdf.js, but PDFJS is not defined in pdf.worker.js. It is however defined in the Backbone View itself and also accessible via the console.
This is the code for the View:
module.exports = PDFView = Marionette.ItemView.extend({
template: require('../../../templates/pdf_frame.hbs'),
onRender: function(){
var PDF_PATH = '../../pdf/websummitpitch.pdf';
var PAGE_NUMBER = 1;
var PAGE_SCALE = 1.5;
var SVG_NS = 'http://www.w3.org/2000/svg';
if (PDFJS) {
console.log("PDFJS is loaded in Backbone View");
} else {
console.log("PDFJS is NOT loaded in Backbone View");
}
PDFJS.workerSrc = "/js/pdf.worker.js";
console.log("workerSrc is set to ", PDFJS.workerSrc);
// Loading document and page text content
PDFJS.getDocument({url: PDF_PATH}).then(function (pdfDocument) {
console.log("get document");
pdfDocument.getPage(PAGE_NUMBER).then(function (page) {
console.log("get page");
var viewport = page.getViewport(PAGE_SCALE);
page.getTextContent().then(function (textContent) {
// building SVG and adding that to the DOM
var svg = this.buildSVG(viewport, textContent);
// render svg in <canvas id="render"> in template
document.getElementById('render').appendChild(svg);
});
});
});
},
buildSVG: function(viewport, textContent) {
// Building SVG with size of the viewport (for simplicity)
var svg = document.createElementNS(SVG_NS, 'svg:svg');
svg.setAttribute('width', viewport.width + 'px');
svg.setAttribute('height', viewport.height + 'px');
// items are transformed to have 1px font size
svg.setAttribute('font-size', 1);
// processing all items
textContent.items.forEach(function (textItem) {
// we have to take in account viewport transform, which incudes scale,
// rotation and Y-axis flip, and not forgetting to flip text.
var tx = PDFJS.Util.transform(
PDFJS.Util.transform(viewport.transform, textItem.transform),
[1, 0, 0, -1, 0, 0]);
var style = textContent.styles[textItem.fontName];
// adding text element
var text = document.createElementNS(SVG_NS, 'svg:text');
text.setAttribute('transform', 'matrix(' + tx.join(' ') + ')');
text.setAttribute('font-family', style.fontFamily);
text.textContent = textItem.str;
svg.appendChild(text);
});
return svg;
}
});
This is the console output:
The blue is console input, so PDFJS is accessible via the console.
This is where the reference error occurs (in pdf.worker.js):
PDFJS.version = '1.0.233';
It is one of the very first lines, where the version number is set. However PDFJS seems to be undefined.
This is my question:
Why is it not defined? How should I fix this?

I got the pdf viewer to work. Instead of using:
PDFJS.workerSrc = "/js/pdf.worker.js";
I just disabled the worker like this:
PDFJS.disableWorker = true;
Now it magically works. Not sure why though.

raphael.js how to add id to a path

I just started using Raphael.js and I am stumped on adding an id to a path. I have read a lot of posts on how to do it, but I think the way my file is set up doesn't allow me to easily translate those solutions.
I have an init.js file and a path.js file
init.js
var r = Raphael('man', 500, 573),
attributes = {
fill: '#204ad3',
opacity: '0.0',
'stroke-linejoin': 'round'
},
arr = new Array();
for (var muscles in paths) {
var obj = r.path(paths[muscles].path);
obj.attr(attributes);
arr[obj.id] = muscles;
obj
.hover(function(){
this.animate({
fill: '#204ad3',
opacity: '0.3'
}, 300);
}, function(){
this.animate({
fill: attributes.fill,
opacity: attributes.opacity
}, 300);
})
.click(function(){
document.location.hash = arr[this.id];
var point = this.getBBox(0);
$('#man').next('.point').remove();
$('#man').after($('<div />').addClass('point'));
$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
.prepend($('<img />').attr('src', 'flags/'+arr[this.id]+'.png'))
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
.fadeIn();
});
$('.point').find('.close').live('click', function(){
var t = $(this),
parent = t.parent('.point');
parent.fadeOut(function(){
parent.remove();
});
return false;
});
}
path.js file:
var paths = {
neck: {
name: 'Neck',
path: 'd="M412.294,73.035c0,0,7.661,28.869,9.406,31.78c1.746,2.911,4.657,2.911,9.896,2.911 s9.313-1.746,9.896-5.239c0.582-3.493,6.985-28.523,6.985-28.523s-2.963,2.599-6.232,5.984c-2.543,2.632-7.2,5.904-11.088,5.904 c-3.889,0-6.705-2.431-10.367-5.04C418.063,78.868,418.08,79.22,412.294,73.035z"',
},
pecks: {
name: 'Pecks',
path: 'd="M379.581,117.994c0,0,0.396-1.586,6.936-4.558c6.539-2.972,13.475-5.351,16.844-6.737 c3.369-1.387,4.559-1.784,4.559-1.784s13.674,2.973,15.061,3.17c1.387,0.198,4.36,1.982,8.72,1.982s9.511-1.387,11.097-2.18 s10.307-2.973,11.693-3.171s1.387-0.198,1.387-0.198s12.286,3.369,16.845,4.36c4.558,0.991,8.917,2.378,9.116,3.765 c0.197,1.387,1.584,4.954,1.584,6.341s-0.197,5.945-0.396,6.738c-0.198,0.792-3.171,15.457-4.757,21.997 c-1.585,6.54-1.188,8.918-7.331,11.494s-10.899,7.53-22.79,2.378s-13.277-5.549-17.241-5.152s-11.098,3.963-14.862,5.351 c-3.766,1.387-16.251,2.179-20.412-0.198c-4.162-2.378-10.9-9.314-12.881-16.844c-1.981-7.531-3.963-16.052-4.359-17.638 C377.995,125.525,377.798,121.165,379.581,117.994z"',
},
}
The generated SVG element does not have an id, nor do I know how to get one in there. Any advise/help would be much appreciated.

This will add the id attribute to the svg path elements:
var id = 0;
for (var muscles in paths) {
var obj = r.path(paths[muscles].path);
obj.node.id = "muscles_or_whatever_you_want_" + id;
id++
//....

to add an id to a SVG element ....
paper.path( path data ).node.id = 'pathIdString';. to test ... try alert( document.getElementById("pathIdString").id );. should return the id

It looks like what you are trying to do is to pop up a div with an image and a close link above the path that is clicked. The problem is that you are confusing the Raphael id of the path object with the index in your paths array. You probably want to eliminate arr entirely and pass the index to your handler through a closure:
.click(function(index) { return function() {
document.location.hash = index;
var point = this.getBBox(0);
$('#man').next('.point').remove();
$('#man').after($('<div />').addClass('point'));
$('.point')
.html(paths[index].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
.prepend($('<img />').attr('src', 'flags/'+index+'.png'))
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
.fadeIn();
}; }(muscles));

Fade in image only after finish loading

I've some images on a page which are loaded randomly and they are over 100kbs, is it possible to have it fully loaded then fade it in rather than progressively loading it?
My JS looks like this...
(function($){
$.randomImage = {
defaults: {
//you can change these defaults to your own preferences.
path: '_images/', //change this to the path of your images
myImages: ['hero_eagle.jpg', 'hero_giraffe.jpg', 'hero_owl.jpg', 'hero_rabbit.jpg']
}
}
$.fn.extend({
randomImage:function(config) {
var config = $.extend({}, $.randomImage.defaults, config);
return this.each(function() {
var imageNames = config.myImages;
//get size of array, randomize a number from this
// use this number as the array index
var imageNamesSize = imageNames.length;
var lotteryNumber = Math.floor(Math.random()*imageNamesSize);
var winnerImage = imageNames[lotteryNumber];
var fullPath = config.path + winnerImage;
//put this image into DOM at class of randomImage
// alt tag will be image filename.
$(this).attr( { src: fullPath });
});
}
});
})(jQuery);

Should be able to, just set the image to display:none in your stylesheet and modify the bit of the script that sets the src to this:
$(this).attr( { src: fullPath }).load(function() {
$(this).fadeIn()
});

Start with the images hidden using CSS. Then use:
$(document).ready(function() {
// Code goes here.
});
and have the fade-in execute there.
There's another SO question that discusses preloading images using jQuery right here: Preloading images with jQuery
Quoting from the top answer:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);

if you want all images to preload before fading in, and display a loading message to the user, you can use something like this:
var gotime = imgArray.length;
$(".maxCount").text(gotime);
var imgCounter = 0;
$.each(imgArray, function(){
$(new Image()).load(function(){
imgCounter++;
$(".presentCount").text(imgCounter);
if (--gotime < 1) {
$("#content").fadeIn();
}
}).attr('src', this);
});