I am trying to send a message to a teams channel using a webhook. I need this to include an image. The message sends successfully using activityImage, however the image gets rounded every time/is distorted. I would like it to just post the image in the dimensions it exists ideally (all are small images).
It doesn't seem like it's an issue with the base64 encoding so I'm guessing there's a syntax issue. I have not been able to find a thread where anyone else is having this problem where their images are rounded. I've tried using messagecard params image, images, and heroImage but none of these will even post the image to teams successfully.
The Messagecard: {"#type":"MessageCard","#context":"https://schema.org/extensions","summary":"summary","themeColor":"2e8b57","title":"Daily Scrum","sections":[{"activityImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAVSURBVBhXY3hvaf9WRYcBiN/KqAAAJ40FDwasafMAAAAASUVORK5CYII="}]}
Note: encoding is done using https://www.base64-image.de/
It is By design behaviour. ActivityImage is always rendered as avatar style in a circle.
For anyone running into a similar issue where you're unable to get messagecards posting your image in its proper resolution - I found that the text attribute can accomplish this. Using image or an array of images distorted the image resolution, and ActivityImage made the image round which was undesired. Using Base64 threw 500 errors depending on the size of the image. Below is what worked for me.
{
"#type": "MessageCard",
"#context": "https://schema.org/extensions",
"summary": "summary",
"themeColor": "2e8b57",
"title": "Daily Scrum 11/6/2022",
"text": ""
}
Related
I need to create a pdf preview that should be displayed on a web page as an image. The pdf file is just a simple report build on almost plain HTML. Essentially I had a problem with displaying checkboxes, now I replaced them with pics of checkboxes but the issue remains the same.
Here how I create the pdf report from my HTML view with help of groovy and grails:
def html = htmlRenderService.getReport(info)
ByteArrayOutputStream out = new ByteArrayOutputStream()
HtmlImageGenerator htmlImageGenerator = new HtmlImageGenerator()
htmlImageGenerator.loadHtml(html)
BufferedImage bi = htmlImageGenerator.bufferedImage
ImageIO.write(bi, "PNG", out)
byte[] bytes = out.toByteArray()
String base64bytes = encoder.encodeToString(bytes)
String src = "data:image/png;base64," + base64bytes
out.flush()
def getReport(Info info) {
return groovyPageRenderer.render(view: REPORT_VIEW,
model: [info: info])
}
Then I send the src string to my view and render it as:<img src="${src}" alt=""/>
Then my checkbox pic looks like this: <div style="/*style stuff*/ background-image: url(data:image/png;base64,LINK_TO_THE_IMAGE"></div>
In the end, I received a picture of my pdf report rendered pretty well displaying as an image on my page, BUT without checkboxes. Here is the picture of one part of it:
And here is the same part but from the pdf document which I rendered all the same way, but just downloaded directed from my webapp:
Here is an example where I combined both options(input checkbox and image checkbox) and rendered it as an image:
So what could cause this issue? Thank you in advance.
UPDATE: I came across today to this comment under another issue with HtmlImageGenerator:
HtmlImageGenerator seems to use a JEditorPane for rendering the HTML. Swing HTML support does not extend to the ability to render data images. It might be possible by digging into the HTMLEditorKit and changing the image loading element to support data images, but then you'd need to find a way to get HtmlImageGenerator to use the altered editor pane.
Seems that HtmlImageGenerator doesn't work well with images inside HTML files, but it's still unclear why it doesn't render checkbox inputs as well.
Without seeing the code you end up with after page load, check the chrome dev tools panel to see if the image has actually loaded correctly to the page which will tell you it's at least accessible to use. Then check if the url is output correctly to the div as the background-image. If it looks correct and there aren't related errors in the console, it is likely a css setting.
With background images, your container will need to contain content or else you will need to specify:
width
height
a display setting
background-position, and a
background-size
If you can upload more info, I might be able to be more specific.
We want to develop a widget to upload images to containers. This is a very well documented task:
1.- Object Storage Tutorial
2.- Fireware-Wiki
3.- OpenStack Object Storage Docs (Swift)
With all this you can manage to get (download), upload, delete files in a container. This is relatively clear.
On the other hand, we want to develop another widget to display images stored in a container. I think in something like this to show them:
<img src="public_object_url"/>
But I do not know how to do that. Where I get this public URL? Is there a public URL? Is it get in some step during the uploading process?
I am a bit lost how to do that. Any help would be highly appreciated.
Thanks in advance.
EDIT 1
We get blocked displaying images once they are downloaded.
A look inside "img" tags shows this:
what is the string returned by URL.createObjectURL(). If we look inside this link, the browser displays this:
We have decoded the string coming in the property "value" and the image is there!
To get the image from the object storage server we used a very similar code that the one used in the operator Álvaro recommended.
objectstorage.getFile( containerName,
reports[i].urlImagen,{
token: token,
onSuccess: onGetFileSuccess.bind(null, i),
onFailure: onGetFileFailure
});
function onGetFileSuccess(index, picture){
downloadedPicsCont--;
reports[index].urlImagen = URL.createObjectURL(picture);
if(!(downloadedPicsCont > 0)){
MashupPlatform.wiring.pushEvent('reports_output', JSON.stringify(reports));
}
}
The picture variable has the following structure, which seems to be ok too.
What is it happening?
EDIT 2
Finally, we found the reason. We were downloading images that were created directly from the cloud and not with objectStorageAPI. In you upload images from the cloud, when you download them you get them inside cdmi objects so the URL.createObjectURL doesn't not work as expected. In the other hand, if you upload them using objectStorageAPI, when downloading them, they come in raw format, so the method works correctly.
As far as I know, FIWARE Object Storage needs authentication, so there are no such public URL. But... you can download the image using your credentials and then use the URL.createObjectURL method for getting an URL usable in the src attribute of the img element.
It's a bit old, but you can use this operator as reference.
The application I'm working on needs to be able to send images as a response. I'm having a bit of trouble getting this to work properly. I tried making a response message string with "Content type images/jpeg" after making a simple get request, and what pops up in the browser is a broken image symbol, so I guess it knows it's supposed to be an image. My images are stored in the database as hexidecimal. How do I format the response for the FCGXFPrintF(...) message to make an image pop up. I tried
Content-Type: image/jpeg\r\n\r\n
<a bunch of hexidecimal>
but that doesn't work. Can someone give me an example of how to format the message, and an example of actual image data for me to test (because my image data might be broken)
Thanks
Assuming you have an image called image.jpg, paste this into a file called go, then type
php -f go
and you will see what your C++ should generate:
<?php
header("Content-type: image/jpeg");
readfile('image.jpg');
?>
I want to embed an HTTP call which returns a png image into an html page.
I will run the page on github's gh-pages if that makes a difference.
The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png
Note that sometimes the url doesn't return the png as the service is sometimes down.
I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.
Do I use an iframe, form, javascript?
Thanks! Scott
[I might as well answer properly]
When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.
However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.
Here's the concept in vanilla-js:
img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";
You can also see it in action here: http://jsfiddle.net/BwJeC/
You could use XHR to load the binary data from the external, dynamic page and set the content of the image.
This question, is very much similar
Or this
I really don't understand why you want to POST.
Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
The best would still be to to a simple get call:
<img src="/dynamicallyGeneratedPicture" />
with a route or script that return a document of type image.
In my facebook reader app my picture sometimes doesn't show, this is because of fbexternal-a.akamaihd.net/safe_image.php won't render it.
I've taken the links from the JSON below, it's ony the relevant part of the JSON reply.
"message": "http://www.youtube.com/watch?v=RJer7-eAy3o",
"picture": "https://fbexternal-a.akamaihd.net/safe_image.php?d=AQCMr5crfpv0x3lm&w=130&h=130&url=http\u00253A\u00252F\u00252Fi3.ytimg.com\u00252Fvi\u00252FRJer7-eAy3o\u00252Fmqdefault.jpg",
"link": "http://www.youtube.com/watch?v=RJer7-eAy3o",
"source": "http://www.youtube.com/v/RJer7-eAy3o?version=3&autohide=1&autoplay=1",
"name": "Dougie MacLean - Broken Wings",
"caption": "www.youtube.com",
"description": "Dougie MacLean's 'Broken Wings' performed with strings at The Perthshire Amber Festival, October 2005.",
"icon": "https://s-static.ak.facebook.com/rsrc.php/v2/yj/r/v2OnaTyTQZE.gif"
The problem is the https://fbexternal-a.akamaihd.net/safe_image.php?d=AQCMr5crfpv0x3lm&w=130&h=130&url=http\u00253A\u00252F\u00252Fi3.ytimg.com\u00252Fvi\u00252FRJer7-eAy3o\u00252Fmqdefault.jpg part.
If I visit http://i3.ytimg.com/u00252Fvi/RJer7-eAy3o/mqdefault.jpg it shows the correct image, so that can't be the problem. Am I doing something wrong or is the safe_image.php just buggy and should I just strip the url to it's original url and use that?
Tnx and greets,
Sjaak
I also get into a similar problem. My problem is because of the image name has a "space" in it. so it is not appear in the facebook debugger and also in sharing. But i checked with your problem, there is no space in it. so its not the solution for the above problem. It will help another one similar to my issue.
I fixed the issue by replace space with hyphen("-") through coding part. After that i debug the url in facebook debugger, it appears. That means Facebook wont show the image name with "space". But there is no logical reason behind this. Anyway it will help someone.
For more information check this answer posted by Patrick D'appollonio. It helps me.