Can't use local image - Githubissues

tatianagrange commented 7 years ago

Hello,

I try to export a pdf with some local image in it. I know the file's path and the image is correctly showing in the Cordova App.

This is the part of the HTML with the image:

<img src="file:///storage/emulated/0/POC/myimage.jpg">

And this is the JS part :

pdf.htmlToPDF({
    data: pdfDatas,
    documentSize: "A4",
    landscape: "portrait",
    type: "base64"
});

But the script failed to show the image on the pdf. I've tried with a web image and there is no problem. Add or remove type: "base64" change nothing.

How can I correctly add local image in the pdf ?

cesarvr commented 7 years ago

make sure that you can access that url from the device/browser, like from the chrome debugger tool try to do an AJAX request and see if you have access.?

jonneroelofs commented 7 years ago

You can also read the file from the filesystem as a base64 string and use that string in your html:

<img src="data:image/jpeg;base64,/9j/4QECRXhpZgAATU0AKgAAAAgAB4dpAAQAAAABAAAAiAESA...">

tatianagrange commented 7 years ago

@cesarvr : Thank you for your response :)

If I use Google Chrome Android and enter the URL file:///storage/emulated/0/POC/myimage.jpg, it works fine

I made an html file on my phone with the image in there : <img src="file:///storage/emulated/0/POC/myimage.jpg">, it works fine too.

For the Ajax request, I'm not sure of what you're asking me (sorry, Cordova is not my major skill in development), but I done this test :

Open a local html file with an image in it and without src in Google Chrome Android
Use adb to change the image with the console (I used document.getElementById("test").src="file:///storage/emulated/0/POC/myimage.jpg")

=> it works fine too

@jonneroelofs : Thank you for your response :) I could try that, but the image is in the phone and http url works fine, I dont understand why a local find can't be used :) At the end of the project, I will have many image to add to the pdf.

cesarvr commented 7 years ago

uumm, thats strange, need to reproduce if you have some example to share that would be great.

tatianagrange commented 7 years ago

Sure, Thank You :)

This is the complete HTML code for the pdf :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Project</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
 <h1>Evaluation</h1>
 <div>
  <h2>Détails</h2>

  <p>blaba</p>
 </div>
 <div>
  <h2>Questions</h2>
  <h3>Question 1</h3>
  <img src="file:///storage/emulated/0/POC/myimage.jpg">
 </div>
</body>
</html>

I also tried without the <html> <head> and <body> tag, but it doesn't change anything.

I call the pdf script in a jquerry click callback :

$("#getPdf").click(function(event) {
    $.get("views/pdfTemplate.html", function (htmlDatas) {
            console.log(htmlDatas);
            if(isAndroid){
                pdf.htmlToPDF({
                    data: htmlDatas,
                    documentSize: "A4",
                    landscape: "portrait",
                    type: "base64"
                });
            }
    });
});

I can save the pdf but the image doesn't show up (The pdf is here)

I tried on two devices with the same results : Huawei Honor 5x (Android 6.0.1) and Nexus 7 (second generation - Android 6.0.1)

cesarvr commented 7 years ago

hi @tatianagrange , Try to put that image in the www/ folder and try to load it from there.

tatianagrange commented 7 years ago

@cesarvr Thank you for your reply, I missed the notification, sorry.

I can't do that, because the file file:///storage/emulated/0/POC/myimage.jpg is a picture take by the phone's camera. Actually, I can have many pictures in the final pdf, but I started by one.

I used base64, as @jonneroelofs said, it works fine, but I have to reduce the size of the picture before get the datas from filesystem (my phone didn't like multiple base64 images' data in the html file :) ).

So I used another way to add local image, but I don't understand why the plugin can't access to the local storage. It is the first time it happened ? :/

cesarvr commented 7 years ago

It's normal webkit can´t access the Android FS due to security reasons so no webpage can´t alter files of your phone. Is better to try to load the file first in memory using some kind of cordova-fs-plugin and then try to display it like maybe you did using a base64 URL.

tatianagrange commented 7 years ago

Ho ! I didn't realize that was a webkit restriction. It make sens. Thank you a lot :)

cesarvr / pdf-generator

Can't use local image #30