javascript - jsPDF plugin not working in firefox: images showing black box -


i trying use jspdf plugin git generate pdf of part of application. link pdf plugin: https://github.com/mrrio/jspdf doing 1) generating combinations of text , images of parts of application using svg , canvas (jpeg format) 2) adding images pdf 3) likewise :

var doc = new jspdf();  doc.setfontsize(40); doc.text(35, 25, "paranyan loves jspdf"); doc.addimage(imgdata, 'jpeg', 15, 40, 180, 160); 

4) not able pdf images on it, displaying text , showing black box in place of image (cannot paste code here)

tried changing image format png, shows white box instead of black box.

update cleaning svg solution problem. not able how clean svg

solution add tag create svg element in code. firefox not understand svg element being created until externally specify tag.

var svg = '<svg>' + chartarea.innerhtml + '</svg>'; 

update add viewport, , viewbox attributes svg render svg on ff correctly.

**p.s. :

for no reason, admins banned answering me on questions; need answer question, have updated question answer. not want go on spending weeks search answer particular problem, spend weeks dins solution. glad if helpful atleast few people.

**

answer browsers not show similar behaviour svg. in chrome adding svg element directly using below statement work well

var svg = objdivtoaddtosvg.innerhtml; 

on firefox,

var svg = '<svg viewbox = "-50 -50 ' + (maindiv.width*2) + ' ' + (maindiv.height*2) + '" width="' + maindiv.width + '" height="' + maindiv.height + '">' + objdivtoaddtosvg.innerhtml + '</svg>'; 

maindiv <div> element wrapping around svg.

svg containing data being converted image. image can seen in chrome without settings. in firefox, svg attributes viewport , viewbox needs specified let browser know svg dimensions.

for information viewport , viewbox please follow link

in above code firefox, viewport , viewbox specified follows: 1) viewport - using height & width properties 2) viewbox - using

viewbox = "-50 -50 ' + (maindiv.width*2) + ' ' + (maindiv.height*2) 

i.e. viewbox = x y min-height min-width

for other browsers (tested opera , safari; not tested on ie)

var svg = objdivtoaddtosvg.innerhtml; 


Comments

Popular posts from this blog

SVG stroke-linecap doesn't work for circles in Firefox? -

routes - Laravel 4 Wildcard Routing to Different Controllers -

cross browser - XSLT namespace-alias Not Working in Firefox or Chrome -