My packaged app gets images from google drive and then display them on the side. But I can't get the images to be displayed. I am trying to get the url of the image so that I can put that url in an image source. The image url that I am getting is actually an html page rather than jpeg, png etc. I have looked at the reference guide for google picker but nothing seems to work.
I am using this
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
fileName = data.docs[0].name;
imgURL = data.docs[0].url;
}
I want to use imgURL as the source for image selection but imgURL is not something like "https//:www.example.com/image.jpg. It is rather an html page I want something that ends with file type only then it will be able to display the image. Please let me know how can I get the image to be displayed in html page of my packaged app after selecting it from google drive.
You should fetch the metadata of the image, then use the webContentLink of the image, then the user can view it in a logged in browser. See the documentation on downloads for more information.
Related
I am trying to form SharePoint file's thumbnail URL (in Office 365) as mentioned in https://www.techmikael.com/2020/01/retrieving-thumbnailspreviews-for.html. This uses SharPoint site ID, List ID and file item's Unique ID to generate thumbnail URL.
/_api/v2.0/sites/${this.context.pageContext.site.id}/lists/${listId}/items/${itemUniqueId}/driveItem/thumbnails/0/${maxHeight}/content${noRedirect}
But I always get error message 404 Not Found. I used search API to verify that the thumbnail URL exists in "PictureThumbnailURL" field.
I also tried with _api/v2.1/... but get the same error. Just to be sure I ran the sample SPFx web part solution available here: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-msgraph-thumbnail and get the same 404 Not Found error for images.
I have already been using getpreview.ashx but I don't see preview for large video files but get the preview URL in the search even for those large files.
I can't use search API since search result may not be immediately available to get and save the thumbnail URL.
Is there any other way to get the picture thumbnail URL using REST API in SPFx?
I found a way to generate the thumbnail URL using drive API. There are properties on File object VroomDriveID and VroomItemID. Using these properties we can format the link as below:
https://{tenantname}.sharepoint.com/_api/v2.1/drives/${VroomDriveID}/items/${VroomItemID}/thumbnails/0/c400x99999/content?preferNoRedirect=true
Below is sample code to get these properties from SharePoint:
let thumbnailURL = "";
let uniqueID = "{file's unique id}";
let resolution = "c400x99999";
let caml: ICamlQuery = {
ViewXml:
<View><Query><Where><Eq><FieldRef Name='UniqueId' /><Value Type='Text'>${uniqueID}</Value></Eq></Where></Query></View>
};
// get list items
const fileItems: IItems = await sp.web.lists.getByTitle("DocLibTitle").getItemsByCAMLQuery(caml, 'FieldValuesAsText, File/VroomDriveID,File/VroomItemID');
console.log("Items: ", fileItems);
let VroomDriveID = fileItems[0]["File"]["VroomDriveID"];
let VroomItemID = fileItems[0]["File"]["VroomItemID"];
thumbnailURL = "https://{tenantname}.sharepoint.com/_api/v2.1/drives/${VroomDriveID}/items/${VroomItemID}/thumbnails/0/${resolution}/content?preferNoRedirect=true";
console.log(thumbnailURL);
I hope this helps!
Hi I am making an online image editor using fabric js.
I am trying to show the user an image similar to the canvas that the user has worked on by importing it from Google and the canvas can be converted to a base64 url through toDataURl().
At this time, to get the image search result corresponding to this, https://www.google.com/searchbyimage?image_url={base64url} I enter the following address, but an error occurs.
How to fix the base64 url to get the desired image result search
I am fetching data from an api and it contains image urls. When i try to display the images it is not showing any picture. when i logged using console.log(service.coverImage), i was able to display the image urls. for example
https://s3.eu-west-2.amazonaws.com/ererf3wery/Hillside Plaza Hotel 5cdebeaf34157a0026526f0d/providerImage/hph.jpeg
You notice the link breaks and it doesn't go to the image directly, now i cannot change this in the database. How can i solve this in Nodejs to replace the places so that it becomes complete.
I have used methods like replace and encodeURIComponent but not helping
thank you in advance
The image url looks fine, if you are not able to see the image in web page, try to remove protocol from it.
url = url.replace("https:", "");
If that doesn't work, then try removing spaces as you wanted:
let url = "https://s3.eu-west-2.amazonaws.com/ererf3wery/Hillside Plaza Hotel-5cdebeaf34157a0026526f0d/providerImage/hph.jpeg";
url = url.replace(/\ /g, "%20");
console.log(url)
I’ve to display a image in a picture box in VisualWebGui. I’ve image in string format.
string ImageString_P;
FileStream fs_P = new FileStream(LocalDirectory + "Page_2.tif", FileMode.Open, FileAccess.Read);
byte[] picbyte_P = new byte[fs_P.Length];
fs_P.Read(picbyte_P, 0, Convert.ToInt32(fs_P.Length));
ImageString_P = Convert.ToBase64String(picbyte_P);
Now, how can I display this image(ImageString_P) in the picture box. Should I create the image of this string data or can I directly display this data in the PictureBox?
If I’ll create the image in a path(suppose “c:\xyz.jpg”) . How it (xyz.jpg) will be displayed in the picturebox.
Visual WebGui is a web application and as such it basically needs to let the browser specifically request any graphics data that should be rendered, which is fundamentally different from that of desktop applications, where you can simply assign the graphics data itself to the image property of a PictureBox.
If you study how a webpage with a PictureBox is rendered to the browser in Visual WebGui, you will see that the PictureBox is rendered as an img tag with the source being set to an Url, which is responsible for serving the image to the browser. When the browser sees that Url on the img tag, it issues another request to the server for the contents of that Url. This "secondary" request is called a gateway request in Visual WebGui.
To serve the graphics to the browser, you need some kind of Gateway in your Visual WebGui application. There are a few types of predefined gateways in Visual WebGui, like for Images (ImageResourceHandle) and icons (IconResourceHandle), but in this case you have a dynamically generated image, so you will need to define your own gateway to serve the graphics contents.... or you can write the image data to, say, Resources\Images folder of your application and then use an ImageResourceHandle to reference it.
Defining your own gateways in Visual WebGui is very simple, and you can see quite a few examples here.
Hope this helps,
Palli
You can do like this:
string ImageString_P;
FileStream fs_P = new FileStream(LocalDirectory + "Page_2.tif", FileMode.Open, FileAccess.Read);
byte[] picbyte_P = new byte[fs_P.Length];
this.picMyPicture.Image = new DynamicStreamResourceHandle(contentBitmap, "image/jpeg");
and it should render fine.
How can you add images to a Google Document (not Spreadsheet or Presentation) via Google Apps Script. I don't see an addImage method. Surely the team would not have left this out.
http://code.google.com/googleapps/appsscript/class_document.html
From the docs:
function insertImage() {
// Retrieve an image from the web.
var resp = UrlFetchApp.fetch("http://www.google.com/intl/en_com/images/srpr/logo2w.png");
// Create a document.
var doc = DocumentApp.openById("");
// Append the image to the first paragraph.
doc.getChild(0).asParagraph().appendInlineImage(resp.getBlob());
}
http://code.google.com/googleapps/appsscript/class_documentapp_listitem.html#appendInlineImage
I'm not sure if you can upload an image. But you sure can insert it into a Paragraph via a url.