I have a page in JSP, which has a tag like:
<img src="images/1.bmp"></img>
The 1.bmp is like:
But the image which looks in my page, visited by firefox, is like:
what should i do to fix this problem?
I've converted the images which you uploaded into your question back to BMP and investigated their source. Everywhere where a non-ISO-8859-1 character appears in the original source, a ? appears in the malformed source.
This means that you've a servlet on /images/* which uses response.getWriter() to write the image using the platform default charset. You shouldn't do that. BMP files are not text files. BMP files are binary files. You should be using response.getOutputStream() to write binary data. You can find a basic and proper example of an image servlet in this article.
Related
I am using a extension with mediawiki that uses the metadata of the uploaded file to generate its title.
However I cannot see how to edit the metadata for an uploaded file in mediawiki at all.
Here is the documention for the extention:
CategoryGallery with captions generated from image description files
(requires CategoryGallery extension) You'll need
Extension:CategoryGallery for this. Place image descriptions on your
image file pages (e.g. File:Popsicle stick Eiffel Tower.jpg) using the
same PageSummary template as before. Now, on the page where you're
putting the gallery, use e.g.:
<catgallery cat="Aubry" bpdcaption="short_summary" />
The result is as
follows (note how the captions are generated using the metadata you
saved on each image page):
How can I do this? Here is an example of the files I have uplaoded: http://www.gwart.co.uk/File:Eldar_Avatar_-_Mark_Gibbons_1994.jpg
If you are talking about metadata generated by CommonsMetadata, see here. There is also metadata extracted from the file; you can't edit that, short of editing the file itself.
I am working on an xpages app, where the client wants to restrict the size of images that are pasted into the document. I have restricted docs with the upload component, but not with a pasted image.
Has anyone done anything like this?
Thanks
walt
Yes it is possible, I haven't done this but there are a few ways you could go about it.
Excuse me if you already know this, but it is worth pointing out for anyone who comes across this question in the future, RichText as we knew it from Notes/Domino is not used XPages, it is all MIME. When I started Xpages I knew nothing about MIME so after understanding it all I have written a little summary on my blog to help anyone get used to the idea. If you are going to do anything with the InputRichText control and File Uploads etc. it is worth getting familiar with MIMEEntity's.
http://camerongregor.com/2016/04/21/webmail-ui-you-must-learn-about-mime/
There are 2 ways that images can make it into the 'rich text field', either uploaded using the 'Image' button on the editor toolbar, or alternatively in some web browsers, the image can be pasted from the clipboard. The 2 different methods will include the image in 2 different ways
Uploaded
If the image is uploaded, then the image becomes a multipart/related mime entity of some sort of image/jpeg, image/png etc., related to the text/html. Between the time that the image is uploaded, and the time that the Document is saved, the image file will be located on the server's disk, in the xpages persistence folder associated with the Document e.g.
xsppers_directory/application-id/session-id/document-id/someimage.png
Pasted
When pasted the image is not uploaded as a file to the server's persistence folder, but is instead included within the text/html as a data URI image (as Stephan mentioned in the comment above).
So, if you want a true solution you will need to address both avenues.
Handling Pasted images
I have shared a plugin on my blog which blocks pasted images, so this could be used to eliminate the 'paste' avenue altogether, and force users down the upload avenue.
http://camerongregor.com/2016/11/14/preventing-pasting-of-images-in-ckeditor/
Alternatively, if you are happy with having smaller pasted images, you could just 'restrict' it by modifying the plugin so that it checks the 'length' of the data URI (as Stephan suggested above) and allows the paste if the length is below your predetermined limit.
If even more alternatively, you could find some sort of client side javascript library that will resize images and do it there in the client before the paste.
Or another server-side option is you could process the contents of the 'text/html' MIMEEntity when saving, and find any img tag's that used Data URI's and strip it out, resize the image using some server side library such as ImageMagick and replace it.
Handling Uploaded Images
For uploaded images, an intense solution would be to extend the InputRichText control (similar to how the have demonstrated in the Mastering Xpages 2nd edition) and override the processAjaxRequest event so that it resizes the image during the process of uploading of the image and putting it in the persistence folder. You could resize it there and then using something like ImageMagick.
Or a less intense version would be to process the 'pending' attachments during a before save event. If you get the DominoRichTextItem from the DominoDocument, you should be able to iterate through the Attachments, checking their attachment state, there will be a state which means 'pending/about to upload' and for these ones you can process them while they are in the persistence folder, before they are finally attached to the document.
Finally if you don't want the xpages runtime / persistence directory to be involved, you could do it all after save, just using the backend NotesDocument and MimeEntity processing. Extract the Image MimeEntities to disk, process them with ImageMagick or similar, and then re-attach them.
Someone else may have a simpler solution that I haven't thought of but at least this gives you some idea of what may be involved.
I am not able to add image that is saved at a URL something like "http://host/img.png" using below code snippet:
section.AddImage(url);
However if I use url as a relative url of image that is present on my disk then this is working fine.
Is this limitation of MigraDoc?
Can someone provide workaround, code samples to over come this?
MigraDoc works with local files (relative or absolute paths), not with files that are somewhere on the Internet.
AddImage() needs a path, not a URL.
You can download the image from the URL and either store it in a local file or store it in a string using BASE64 encoding and pass that string to MigraDoc.
You will have control over accessing the image from the web and can properly deal with problems.
See this article on BASE64 encoding for MigraDoc images:
http://pdfsharp.net/wiki/MigraDoc_FilelessImages.ashx
I wanted to ask how can we read a post request of a form that has file upload and then convert the file in base64 encoded form.
Looked at the examples shown in the play framework site, but it only explains about uploading a file and storing it in some location. But what if I need to convert the uploaded image into a base64 encoded form??
I looked through various resources, could not find what I was looking for. I just have a simple form that uploads image and need convert the upload image to base64 encoding. And yes I am using play framework.
Any help, please.
Update:
What I was actually searching for was:
val imageRaw:Option[play.api.mvc.MultipartFormData.FilePart[play.api.libs.Files.TemporaryFile]] = request.body.file("picture").map { picture =>
picture
}
Now how do I convert the imageRaw to base64 encoded string, I don't need to store the image in the disk.
Update2:
What I really had to achieve was load an image using drag and drop functionality and then load the image in a HTML5 canvas, had no problems with other browsers but since IE9 doesn't support FileReader Api, I couldn't retrieve its imageData after its loaded using the DnD functionality.
So, now I am trying to use polyfills to be able to use FileReader API in IE9, does anyone have any idea or samples of how to use them. I have been trying to use FileReader API for now, but can't get to know how to use it.
Some website has images with strange URLs
For example below PNG image (Strange URL):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAdCAYAAAA91+sfAAAAIElEQVRoge3BgQAAAADDoPlTX+AIVQEAAAAAAAAAABwDJF0AAcCDW58AAAAASUVORK5CYII=
What type of URL is this? and how this works in that website?
Thanks
data URI scheme
That's an embedded image whose binary contents were encoded by Base64 so that it fits in a "normal" String inside a HTML page. With other words, that's an embedded image. Also see this: http://www.w3.org/TR/xhtml-print/#s.4.1.2
However not all browsers do support it and it's also not really efficient. The image is now tied to the parent (X)HTML page and you cannot control its request nor (caching) headers separately. It's only useful when transferring images or any other binary data through real XML files.
Like everyone mentioned, it is data URL scheme. It was detailed in RFC 2397 back in 1998 and follows the following syntax:
data:[<mediatype>[;base64],<data>
IE 5 - 7 do not support it, other standard-compliant browsers such as Firefox, Safari, Opera and Chrome do support data URIs. Work arounds are available for older versions such as IE.
Just a side note, you can generate it with one line of PHP :
<?php echo base64_encode(file_get_contents("yourimage.gif")); ?>
It appears you are looking at a URI specified using the data URI scheme.
In this case I believe the PNG data is encoded directly into the URI.