I am using cordova-plugin-photo-library to show gallery images in my app. I have used their photoLibrary.getLibrary() method to get the image. That methods returns two type of url:-
photoURL(ex:- cdvphotolibrary://photo?photoId=ADB24867-0CCB-4207-923A-DC9D44233434%2FL0%2F001)
filePath(Ex:- /var/mobile/Media/DCIM/100APPLE/IMG_0652.JPG)
I have tried to show image using either of those path. I am able to show the images using filePath but could not show the image using photoURL. All images does not return filePath. Could anyone can help me to show images using photoURL?
As per their doc we can show directly using photoURL all we have to use imgSrcSanitizationWhitelist(). I have tried but it's not working.
Related
I am trying to load a PDF file as an image into a SVG within D3.js, and using React. I have managed to use react-pdf to load the pdf file as a dom element. Through the network tab, I see that 'pdf.worker.js' has generated a blob as a jpeg image at a URL (possibly using createObjectURL). I want to access this jpeg image, but I don't know how to, and I haven't found an answer.
https://imgur.com/PuSSJqC
Can anyone help me please?
I tried getting accessing the canvas element directly from the DOM and using importPDFCanvas.toDataURL(), but this image is blank.
onDocumentLoadSuccess = () => {
const importPDFCanvas: HTMLCanvasElement = document.querySelector('.import-pdf-page canvas');
const pdfAsImageSrc = importPDFCanvas.toDataURL();
};
<Document file={importPDF.pdfSrc}>
<Page
className="import-pdf-page"
onLoadSuccess={this.onDocumentLoadSuccess}
pageNumber={1}
/>
</Document>;
I expect there to be a way to access this image or the URL through the pdf.js api, but have no idea how to get it. Sorry if this seems like a newbie question, would appreciate any guidance on where to look or what to look for!
Edit:
Solution was just to use onRenderSuccess instead of onLoadSuccess.
My little application is written in reactjs, on a page it will update title / description based on the real object that user selected like this photo. The new title and description are display correctly but when sharing on fb, the values are not loaded correctly (the value is from old html templated) - go to facebook and paste the url or use fb debugger the values are from static html page.
Have anyone had this issue and have "fixed" it ?
Thanks for any recommendation !
Facebook ignores JavaScript, so dynamic OG tags are not possible. You can solve this with Server Side Rendering or https://prerender.io/, for example.
You can pass as parameter in url (abc.com?title=awesome&desc=flower), and in og tags use that parameter to make dynamic.
How can I reference an image, editable in the Wagtail admin, from a CSS file?
I am designing a page type that will have a FooPage.banner_image field. The field is editable for each page, in the Wagtail admin; it describes the image to use for that page, as background on the banner.
The page style for that page then needs to use the banner image, referencing a URL to that specific image. What reference can I write in the CSS, so that it will get “the banner_image for this page” as a URL?
If you are needing an image URL outside of the template - see the docs about Generating renditions in Python.
To get a URL of an image, you need to generate a rendition and then get the URL of that rendition.
A rendition is what is generated when you pass in the resize rules (eg. width-400) in your templates.
To get a URL you can use this example code:
image_url = FooPage.banner_image.get_rendition('fill-300x186').url
OR get the original:
image_url = FooPage.banner_image.get_rendition('original').url
I am using nervgh/angular-file-upload to let the user take a photo from his mobile phone camera and upload it. It works fine, but now I want to display the image too. Of course I could add that functionality to my backend and just use the img-tag and point it to the URL. But since I upload the my JavaScript file already has to have the file at some point, right?
How do i display it?
I tried it like this:
<img ng-src="data:image/JPEG,{{uploadedImage}}">
but couldn't get it to work. According to the wiki of angular-file-upload I have control over an "FileItem", but I can't seem to figure out where the actual file-date is stored.
So my question is: Is it possible to use img tag with ng-src to display a file that is directly stored in JavaScript as byte array and where does angular-file-upload store the actual array-data
You need to make use of ngf-thumbnail option
<div|span|...
*ngf-thumbnail="file" //Generates a thumbnail version of the image file
ngf-size="{width: 20, height: 20, quality: 0.9}" the image will be resized to this size
// if not specified will be resized to this element`s client width and height.
ngf-as-background="boolean" //if true it will set the background image style instead of src attribute.
>
Take a look at this fiddle Click Here
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">
This line is helping us to show a thumbnail of the image being uploaded by the user, you can choose different html tags as suggested above. You have to link the image using the file name, the ng-model in that case is picFile and that is being used as ngf-thumbnail.
You can use your own css on it as well.
you could use fileReader.
bind the ngModel file then convertit to base64 and use it as the image source
var reader = new FileReader();
reader.readAsDataURL(scope.ngModel);
reader.onload = function(readerResult) {
$scope.$apply(function(){
$scope.mysrc = reader.result;
});
};
I am new in angular2.I am working with angular 2 and facing issue as follows
1]I have been designed 2-3 template like email template,sms template which will take predefined data and display that data
2]I have been designed screen which contains dropdown with name like email,sms etc
email option has link to email template and same for sms.
The main thing is i want to show the selected template view as a preview of that template.Means if i select sms then the sms template will be shown in given section of the same page.(like upload image preview.)
is it possible?
Thanks ..
Yes obviously, you have to use Routuing for the same, by using routing in angular2 you will be able to
navigate throughout the pages and you can show whatever page you want to display
see also :-
https://angular.io/docs/ts/latest/guide/router.html
latest Updated to angular2 RC1 (wroth reading)
https://coryrylan.com/blog/introduction-to-angular-2-routing
Angular 2 router examples + #Routes typing support
How to use child routes in Angular 2.