Can not display local image file as WebEngine image src attribute - webview

I'm trying to set the src of an img tag I have dynamically. The following piece of code works when running from eclipse but not after exporting it as a running jar file:
doc.getElementById("user-thumb").setAttribute("src", selectedVcard.getThumb().getFilePath());
The element got by the "user-thumb" id is an image. The thumb object returned is a simple custom ImageView I've extended to hold more information and is initialized using:
public Thumb(String url) {
super(url);
this.setFilePath(url);
getStyleClass().add("thumb");
}
the method getFilePath() is returning a path from a temporary file starting with:
file:/
But I've already tried to change it to
file://
and even:
file:///
and got no success. I have googled and searched here but every answer points to start with file://. Is there something wrong with my code or is it javafx 2? By the way, I'm using javafx 2.2 GA and the jre 1.7.0.6 from oracle. Cheers

You could use Data URI for the images
Something like ...
String imageMimeType = "image/jpeg"; // Replace this for the correct mime of the image
String dataURI = "data:" + imageMimeType + ";base64," +
javax.xml.bind.DatatypeConverter.printBase64Binary(imageByteArray);

Related

Inside Splash, how to use src attribute to append to a url

------------ORIGINAL QUESTION------------------
In my Splash Script, I am trying to use "splash:go" on a new url that is based on the "src" attribute of an "img" tag. How can I access this "src" relative url and join it to a start_url?
For example, imagine that the img element has the following contents:
<img id="ImageViewer1_docImage" onload="BlockerResize('ImageViewer1_ContentBlocker1','ImageViewer1_WaterMarkImage');" src="ACSResource.axd?SCTTYPE=ENCRYPTED&SCTKEY=gMYed5OWqcT9I1Y2fM85DvB48X5U1DQ5mOUiJoUH4rioyau0nJdxt0PHFfGVTMiUsork/YD+Cw0F6ZzcviP4sG09xrqWM8/zJlyEeVRFkKXVnkyHYWgwNJzCSUE4Kh4yCsqw6mCuIxWxPj6BAI7Hbw==&CNTWIDTH=849&CNTHEIGHT=684&FITTYPE=Height&ZOOM=1" alt="Please wait" style="border-width:0px;cursor: url(images/Cursors/hmove.cur); z-index: 1000">
Here I am trying to extract the src attribute and add it to start_url:
https://i2a.uslandrecords.com/ME/Cumberland/D/
I want all of this inside the Splash script. I need it to be done inside of Splash because otherwise I lose my security/encryption or something--it renders "Bad Data" instead of the new webpage. Do you have any recommendations?
------------UPDATE------------------
So I managed to obtain the url I needed from the src attribute using the following code:
var = splash:evaljs("document.getElementById('ImageViewer1_docImage').src;")
splash:go(var)
However, the problem is that this is producing a error message. All I find in the snapshot is a white page with the following message:
Failed loading page (Frame load interrupted by policy change)
https://i2a.uslandrecords.com/ME/Cumberland/D/ACSResource.axd?SCTTYPE=ENCRYPTED&SCTKEY=gMYed5OWqcSvEWOJA6wGVmb642s2oZHqkYmT6VTpORTzMY7CgvDU5jsjJG/xp0X3eQ9BiDnbaTdAmISeLkC3hyjxGjcSnXOKgGDa8cI2fniY0ILT+NqvQToMGIB+/X3ZIs7Q+D4ppTSZGYZ2L4M/
Webkit error #102
Any idea why?
The image src attribute is exactly the URL you need to access or as stated by the question title you need to append it to some other URL parts?
If that is the case, you can do it by '..'
Ex.: splash:go(base_url..var) -- concatenation
ISSUE RESOLVED:
Here is the solution. The GET request was breaking down because it didn't know how to render the image in html given the webkit settings. If you execute the GET request without rendering the page, the response.body has the image.
CODE:
local response = splash:http_get(var)
return {
body = response.body
}

TCPDF - Header image only displays on first page

I am using TCPDF to generate a 2 page pdf document.
I have added a header and a footer to the document. The text part of the header and footer shows up correctly on each page however when I include an image logo in the header it is only showing up on the first page.
public function Header()
{
$this->Image('/home/xxxxxx/public_html/xxxxxxxx/uploads/logo/logo.png',10,6,0,13);
$this->SetFont('helvetica','B',20);
$this->Cell(80);
$this->Cell(0,0, $project->name . ' - Project Plan',$frame,0,'R');
$this->Ln(8);
$this->SetFont('helvetica','',10);
$this->Cell(0,0, $organisation->name,$frame,0,'R');
$this->Ln(10);
}
Does anyone have any idea what I am doing wrong here?
Thanks
I think is not related to header/footer, but I think TCPDF has bug that broken Image function with same image file loaded multiple times as reported here TCPDF - image displayed only once
bug also present on actual version tecnickcom/tcpdf:6.2.26
I resolve this problem by loading image outside and pass to the function as string.
public function Header()
{
$this->Image('#'.file_get_contents('/home/xxxxxx/public_html/xxxxxxxx/uploads/logo/logo.png'),10,6,0,13);
$this->SetFont('helvetica','B',20);
$this->Cell(80);
$this->Cell(0,0, $project->name . ' - Project Plan',$frame,0,'R');
$this->Ln(8);
$this->SetFont('helvetica','',10);
$this->Cell(0,0, $organisation->name,$frame,0,'R');
$this->Ln(10);
}
As said it is a tcpdf bug. In my case I had two logos in header one png and the other jpg. The problem happened only with the .png. Changing the image type from png to jpg solved the issue.
I solved this by using base64 encoded string like this:
$image = base64_encode(file_get_contents('path_to_image'));
Then you can use it like this:
<img src="#<?= $image ?>" />

How to access image from native URI (assets-library) in Cordova for iOS

I have a Cordova/PhoneGap app which uses the camera to capture a picture. I need to access this picture to send to my server.
For Android I simply use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, fileName)
However; on iOS the filename does not come back as such. My return value for iOS shows the path as
assets-library://asset/asset.JPG?id=539425FE-43AA-48E7-9865-D76348208AC7&ext=JPG
How can I access and read this image? I'd prefer to stick with $cordovaFile but just want to get it to work.
I am using CordovaCameraPreview plugin and the best I can get back from the picture taker handler seems to be something formed similar to:
assets-library://asset/asset.JPG?id=990355E1-200A-4E35-AAA1-7D461E3999C8&ext=JPG
assets-library://asset/asset.JPG?id=C49FF0EB-CCCB-45B2-8577-B13868D8DB29&ext=JPG
How can I convert this to a filename and path that I can read with $cordovaFile? According to their documentation (http://ngcordova.com/docs/plugins/file/) it looks like I need to use one of their paths for File System Layout. It works fine on Android using cordova.file.dataDirectory but can't figure out how to access on iOS
I've also tried using window.resolveLocalFileSystemURL(path) but am getting undefined as my result.
Update
I feel like I'm getting closer... using window.resolveLocalFileSystemURL(path,resolveOnSuccess, resOnError); I get more information
name: "assets-library"
fullPath: "/asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
name: "asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
nativeURL: "assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
It looks like I now need to use the fullPath but still can't figure out how to access with $cordovaFile
If I try to use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, data.name) where data.name is asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG I get a file not found error
Update 2
I have tried using every single File System Layout available at http://ngcordova.com/docs/plugins/file/ and receive the same File Not Found error on each one. Still no clue how to access a file in assets-library using $cordovaFile
I had success with a simple substitution, like this
fullPath = fullPath.replace("assets-library://", "cdvfile://localhost/assets-library/")
It works in iOS 9.3
I was struggling with a similar issue for a while, but I figured it out today. I also thought that the FileSystem APIs didn't work with assets-libary:// URIs -- but that is not the case.
You should be able to get access to the File object (as well as the actual image name) by using the following code:
resolveLocalFileSystemURL('assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG', function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(event) {
console.log(event.target.result.byteLength);
};
console.log('Reading file: ' + file.name);
reader.readAsArrayBuffer(file);
});
});

Windows Phone get image source path in String

I am trying to get image source path in string but not able to get it.
Here is my code
String tempJPEG = imgUpload.Source.ToString() ;
Here imgUpload is <Image x:Name="imgUpload" ></Image>
I am getting this "System.Windows.Media.Imaging.BitmapImage" in tempJPEG.
How can I get image path?
The source property of the image control contains BitmapImage itself. Therefore you need to use the BitmapImage.UriSource property.

Can't load images from Content folder on iis in asp mvc project

In visual studio virtual server this works. But when I put site on IIS it doesn't display images from content folder.
var imgPath = '/Content/Images/Icons/' + icon + '.png';
var imageContent = '#Server.MapPath(Url.Content("-1"))';
image = imageContent.replace('-1', imgPath);
I get errors in browser foreach image
http://localhost/Content/Images/Icons/carwash.png Failed to load resource: the server responded with a status of 404 (Not Found)
First thing is first, are you sure that all of your 'icons' are part of the solution and are actually being deployed to your web server? I have had a few instances where I would add a file to the solution directory and VS does not automatically include in it the solution, thus it never actually gets deployed...
If that is ok and the images are actually there, my next question would be, have you tried just using the #Url.Content helper in your view to determine if that is working as it should?
<img src="#Url.Content("~/Content/Images/Icons/SomeIcon.png")"/>
EDIT
Since you are trying to accomplish this in Javascript and the above tag works in HTML, you should be able to condense that code up there to the following code:
var image = '#Url.Content("~/Content/Images/Icons/")' + icon + '.png';
Go ahead and let MVC get the path to the Icon folder and append your file and extension to that. This should eliminate the need for string replacement and still be able to process the icon paths in JS.
var image will now be the complete relative path to the icon file you have passed to this function. You can use this string to update and img src tag or create an image or whatever.

Resources