search

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
654 stars 101 forks source link

svg2pdfjs: Images with external resource link are not supported #72

Closed Traveller1111 closed 5 years ago

Traveller1111 commented 5 years ago

I am trying to load an SVG image in a pdf.

The below is my code

`function toDataURL(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); }

var svgImg = document.createElementNS('http://www.w3.org/2000/svg','svg'); svgImg.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink'); svgImg.setAttribute('height','200'); svgImg.setAttribute('width','230'); svgImg.setAttribute('id','test');

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); svgimg.setAttribute('height','185'); svgimg.setAttribute('width','230'); svgimg.setAttribute('id','testimg');

// convert image and add to svg image object toDataURL('/opt/data/APP_DATA/Pictures/Picture1.jpg', function(dataUrl) { svgimg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', dataUrl); }); svgimg.setAttribute('x','40'); svgimg.setAttribute('y','410');

svgImg.appendChild(svgimg);`

If I declare the image as

toDataURL('http://www-1234.com/Project/Pictures/Picture1.jpg', function(dataUrl) {

it is displaying the image.

if I give it as

toDataURL('/opt/Data/APP_DATA/Pictures/Picture1.jpg', function(dataUrl) {

it is not displaying the image

I have to fetch the images which is one directory behind the src.

It is displaying in the console as "http://www-12344.com/opt/DATA/APP_DATA/Pictures/Picture1.jpg" not found

Images with an external resource link are not supported!

I don't want to give an URL, I have an image on my server which is not an URL and it is just a path. How to retrieve the images with the path.

yGuy commented 5 years ago

Do you understand the difference between client and server and how they interact? The code runs on the client - it doesn't have access to the server's directories and needs to go through an "external resource link" in order to fetch the data. If the image is static, you could inline the image data as a constant data-url string in the client source code to avoid the extra roundtrip to the server, but svg2pdf will never ever be able to read files from the server's file system, directly. A regular browser will probably never be able to do that.

Closing, since this is not an issue with svg2pdf, but a generic "image data loading in the browser"-question. Please use StackOverflow for these kinds of questions.