Cloudinary images not showing up on IOS debug build - codenameone

I am making an app on codename one using InteliJ and I have some cloudinary pictures that show up on the simulator but when I send an IOS debug build, the pictures do not show up.
I went to this link https://www.codenameone.com/blog/sizing-images-just-right-with-cloudinary.html and used the same method but it did not work. When I tried to show a local image on the debug build, it showed up but the cloudinary images did not, so the problem has to do with cloudinary, not images in general.
Here is my code:
Cloudinary cloudinary = new Cloudinary(ObjectUtils.asMap(
"cloud_name", NAME,
"api_key", API_KEY,
"api_secret", API_SECRET));
cloudinary.config.privateCdn = false;
ArrayList labels = new ArrayList();
for (Object url : images) {
Image img2 = cloudinary.url()
.type("fetch") // Says we are fetching an image
.format("jpg") // We want it to be a jpg
.new Transformation().crop("fill") // We crop the image to fill the given width/height
.width(hi.getWidth())
.height(hi.getWidth())
)
.image(encImage, (String) url);
// Add the image to a label and place it on the form.
labels.add(img2);
}
for (Object img : labels) {
Image newImg = (Image) img;
allImgs.addItem(newImg);
}
ImageViewer imgViewer = new ImageViewer();
imgViewer.setImageList(allImgs);
Again, I am not getting any error messages in the simulator and the images are showing up but they are not showing up in the IOS debug build. Please help.

Related

How to get image and image URL from firebase storage and also display the saved images into website gallery component using react js

Hi I am new to rect Js and hope so I you will get the problem I am facing.
I and using the react js and firebase storage.
I want to done following task.
1 upload image from-front end to the storage
2 Pass it's reference to a collection in firebase.
3 get the images I have saved in the firebase storage and display it in the Gallery section.
I have completed the 1st task and facing issue with 2nd and 3rd. I can't find a solution on the internet related to React Js all the tutorial are about React Native.
basically I am creating a front end and a dashboard from where I upload images for the gallery section and get those uploaded images on the website gallery section
all the imports
import { ref, uploadB``ytesResumable } from "firebase/storage";
import { storage } from "../../firebase-config";
Here is the code for uploading the file into firebase storage.
let fileRef = ref(storage, `birdsImage/${birdName}-${ringNo}`);
const uploadTask = uploadBytesResumable(fileRef, file);
// track progress
uploadTask.on("state_changed", (snapshot) => {
progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
setUploadProgress(progress);
console.log(`upload is ${progress} % done`);
image gallery where the image must show
Please Help me with this...!!!

How to use Network Image in PDF Flutter

I have a database document where there is links available for multiple images. I want to display this images in pdf.
I am using pdf: ^2.1.0 to edit the pdf file and flutter_pdfview: ^1.0.1 to view the pdf.
I am currently displaying images like this but this can only display images from the asset
final profileImage = pw.MemoryImage(
(await rootBundle.load('assets/images/image.png')).buffer.asUint8List(),
);
//Inside Widgets
pw.Image(profileImage)
I want to show images using a link but its not being possible.
This will help you
var response = await http.get(Uri.parse(imageUrl));
var data = response.bodyBytes;
Image(pdfW.MemoryImage(data),)

Is there possible way to detect the color by using ColorThief which is uploaded from Dropzone?

I used react-dropzone for image upload and I got “file name” and “preview” for each uploaded item from the dropzone.
And I would like to use ColorThief for detecting the uploaded image of colors. Because I have to reject when the color is more than 20 from the uploaded image.
I got the following error when I put “file name” in image.src:
Unhandled Rejection (IndexSizeError): Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Here is my code.
var image = new Image;
image.src = FILENAME_FROM_DROPZONE;
var colorThief = new ColorThief();
var dominantColor = colorThief.getPalette(image);
Is there any way to get a complete file path from DropZone?
Now I just got the uploaded file name.
I think the error occurs because there is no complete file path in image.src.
How can I get a complete file path from Dropzone? Is there any another way to solve this error please?
I am doing this using FileReader, here is the code:
// let's get the data from DropZone
const { acceptedFile } = e.detail
let reader = new FileReader()
reader.readAsDataURL(acceptedFile)
// create an image
let img = new Image()
img.src = reader.result
// and now let use the colorThief
const colorThief = new ColorThief()
const colors = colorThief.getColor(img)
This way you have your dominant color and can use image for preview.

Unable to display a PDF file in Angular app

I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog.
Here is what I have, after looking at various answers:
In *.component.ts:
openPDF() {
this.myService.fetchPDF().subscribe(
res => {
let file = new window.Blob([res], {type: 'application/pdf'});
let fileURL = window.URL.createObjectURL(file);
window.open(fileURL, '_blank');
}
);
}
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf';
return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
}
I already tried using responseType : 'arraybuffer', but it didn't work out either.
Here are the threads I have looked at:
How to Display blob (.pdf) in an AngularJS app
Angular 2 download PDF from API and Display it in View
PDF Blob - Pop up window not showing content
Failed to load PDF document - Angular JS - BLOB
I am not sure why are you using httpClient. The outcome that you want could be simply achieved by the following code
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf'
return path;
}
In *.component.ts:
openPDF() {
window.open(this.myService.fetchPDF(), '_blank');
}
You will either need to use the html embed tag (most likely also using a safe pipe), a PDF viewer (like Google PDF Viewer) or you can open the PDF in a new tab (this is the more common approach I see). It depends on your preference.

Opened file gets cached in titanium. Cant view replaced file content while app is running

I am facing a slight issue while editing a file.
I am saving a file (image) with a certain name on ios using the code below.
But the problem is that when i replace the image stored in a file (eg temp.jpg) the app still picks up the previous image when i open the file. However the new image can be seen in the explorer.
If i restart the app the new image appears while opening the image.
var folder = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, 'DocImages');
// DocImages is a folder for files
// ImageVar contains the blob for the new image from camera or gallery
// docImgModel is the model class containing the name and image path of the image
if(imageVar !== null && imageVar !== undefined){
if (docImgModel.imagePath !== null && docImgModel.imagePath !== undefined){
tempFile = Ti.Filesystem.getFile(docImgModel.imagePath);
if (tempFile.exists()) {
tempFile.deleteFile(); // deleting already existing file
}}
// in case of changing the image stored in a file(the case in which i have a
// problem) the imgFile(below) is same as docImgModel.imagePath (above)
imgFile = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory + 'DocImages/', filenameWithExtension); // creating a new file
// writing image to file
imgFile.write(imageVar);
Ti.API.info('new image saved');
}
}
I was wondering if titanium saves cache of the file already opened and is hence not able to show the new image.
If not, is there anything else i am doing wrong or something i could do to make it work.
I just want to show the new saved image. Is there any way to do it.
Thanks.
I haven't worked with opening files from the device, but I ran into a similar issue when trying to update data on my screen. If you are saying when you open the app and it loads the correct image comes up, then the code that you use to load the image appears correct and working. I assume that is the code you posted above. Even that appears to be a code fragment of a more complete file.
You didn't post any UI code, which is probably where your real problem is coming from. You have an object, a view of some sort I'm guessing, that is already rendered using the old image before you load the new image. So debugging, you might see the new image's data loaded in the code above, but the UI element hasn't been assigned or updated correctly.
As a test, I would suggest that you put some test code into your app that allows you to destroy your UI elements and recreate them, you will probably see the picture come up properly in that case.
According to this post: http://developer.appcelerator.com/question/31181/simple-image-refresh
Just assigning the image you loaded to the url of the image should update it. Your example code doesn't show the image object that you are attempting to update and how that communication is made from the code that is loading the image.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
var image1 = 'image1.png';
var image2 = 'image2.png';
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
var img = Titanium.UI.createImageView({
width:100,
height:100,
top:50,
left:110,
url:image1
});
win1.add(img);
var btn = Titanium.UI.createButton({
title:'load',
width:100,
height:35,
top:50,
left:0
});
function switchImage(){
if(img.url == image1){
img.url = image2;
} else {
img.url = image1;
}
}
btn.addEventListener('click',function(){
switchImage();
});
setInterval(switchImage,3000);
win1.add(btn);
//
// add tabs
//
tabGroup.addTab(tab1);
// open tab group
tabGroup.open();

Resources