Color JPG image saved by imwrite() incompatible with Web Browser.

Hello There,
I am trying to read a file from the server and display on the webpage using JSP. The file is created using imwrite(). I have tried .jpg and .png. I have tried grayscale (8-bit depth) and color (24-bit depth). I have tried on Internet Explorer and Google Chrome. Nothing works and the image is not displayed. I have no problems displaying images downloaded from the internet.
I presume there is something in the file format that is causing all this problem. If required, I could email two .jpg file, one that works fine and the other that does not.
The MATLAB code used to create this image is:
imwrite(g,'../image/image.jpg');
Please help.
Thanks and Regards.
JSP code below:
<!DOCTYPE html>
<%@ page import="java.util.*" %>
<%@ page import="java.util.Calendar" %>
<%@ page import="java.io.File" %>
<%@ page import="java.io.*" %>
<%@ page language="java" import="java.util.*"%>
<head>
<script language="JavaScript">
var refreshImageFlag;
function refreshFlagEnable(){
refreshImageFlag = true;
}
function refreshFlagDisable(){
refreshImageFlag = false;
}
function refreshIt() {
if (!document.images) return;
if(refreshImageFlag == true){
tmp = new Date();
document.images['myCam'].src = "C:\\WebDev\\uploads\\image\\image.jpg" + "?" + tmp.getTime();
}
}
</script>
</head>
<BODY onLoad="setInterval('refreshIt()',1000);">
<<C---WebDev--uploads--image--image.jpg>>
<FORM NAME="form1" METHOD="POST">
<input type="button" value="StartRefresh" onclick="refreshFlagEnable();"/>
<input type="button" value="StopRefresh" onclick="refreshFlagDisable();"/>
</FORM>
<<C---WebDev--uploads--image--image.jpg>>
</BODY>

Answers (2)

Doesn't your IMG SRC have to start with file:/// for a local file? As in
img src="file:///C:\WebDev\uploads\image\image.jpg"

9 Comments

Thank you for responding Mr. Robinson.
I tried with both (1) with file:/// and (2) without. It is still the same result as earlier. The file saved by MATLAB is not displaying but works fine with files downloaded from the internet and saved on the disk.
-Regards-
What happens if you read a jpg file using imread() and then write it out (with a different name) using imwrite() ? Compare imageinfo() of the two [if you have the Image Processing Toolbox]
I do see a significant difference in file size after using imageinfo().
% file from internet
Filename C:\WebDev\uploads\MATLAB\imY\image.jpg
FileModDate 21-Oct-2011 08:31:52
FileSize 50434
Format jpg
FormatVersion ''
Width 260
Height 170
BitDepth 24
ColorType truecolor
FormatSignature ''
NumberOfSamples 3
CodingMethod Huffman
CodingProcess Sequential
Comment {}
% file from MATLAB
Filename C:\WebDev\uploads\MATLAB\imN\image.jpg
FileModDate 21-Oct-2011 06:27:54
FileSize 28340
Format jpg
FormatVersion ''
Width 260
Height 170
BitDepth 24
ColorType truecolor
FormatSignature ''
NumberOfSamples 3
CodingMethod Huffman
CodingProcess Sequential
Comment {}
Thanks for trying to help me out and for your suggestion. I have added a new answer with results of imageinfo() for the sake of formatting and readability.
The file from internet image.jpg is read and written back using imwrite() as image2.jpg. The former is again large in size while the latter is small in size. The former displays fine but the latter does not. Am I missing some paramter(s) with imwrite() that causes imwrite() to save a file in a format that is not supported by IE or Chrome?
% file from internet
Filename C:\WebDev\uploads\MATLAB\imY\image.jpg
FileModDate 21-Oct-2011 08:31:52
FileSize 50434
Format jpg
FormatVersion ''
Width 260
Height 170
BitDepth 24
ColorType truecolor
FormatSignature ''
NumberOfSamples 3
CodingMethod Huffman
CodingProcess Sequential
Comment {}
% file from internet is read and written back using imwrite()
Filename C:\WebDev\uploads\MATLAB\image2.jpg
FileModDate 24-Oct-2011 11:08:32
FileSize 24717
Format jpg
FormatVersion ''
Width 260
Height 170
BitDepth 24
ColorType truecolor
FormatSignature ''
NumberOfSamples 3
CodingMethod Huffman
CodingProcess Sequential
Comment {}
I have also tried after reading a file and saving it in a different format using imwrite() and then testing it with my JSP. I have added a separate answer for that.
-Thanks again for your help-
The characteristics _look_ okay.
I suggest trying doing the imwrite() with the JPEG-specific parameter 'Quality', 100
I also suggest trying imwrite with 'mode', 'lossless'
I cannot think of any reason that the images might be incompatible, but we might at least be able to figure out the file size difference.
Also there is a routine imfinfo() which should tell you details such as the EXIF tags.
Trial 1: Did not work.
>> imwrite(g,'image.jpg','Mode','lossless');
>> info = imfinfo('image.jpg');
>> info
info =
Filename: 'image.jpg'
FileModDate: '26-Oct-2011 15:20:05'
FileSize: 146519
Format: 'jpg'
FormatVersion: ''
Width: 260
Height: 170
BitDepth: 24
ColorType: 'truecolor'
FormatSignature: ''
NumberOfSamples: 3
CodingMethod: 'Huffman'
CodingProcess: 'Lossless'
Comment: {}
Trial 2: Did not work.
>> imwrite(g,'image.jpg','Quality',100);
>> info = imfinfo('image.jpg');
>> info
info =
Filename: 'image.jpg'
FileModDate: '26-Oct-2011 15:21:16'
FileSize: 92342
Format: 'jpg'
FormatVersion: ''
Width: 260
Height: 170
BitDepth: 24
ColorType: 'truecolor'
FormatSignature: ''
NumberOfSamples: 3
CodingMethod: 'Huffman'
CodingProcess: 'Sequential'
Trial 3: Did not work.
>> imwrite(g,'image.jpg','Mode','lossless','Quality',100);
>> info = imfinfo('image.jpg');
>> info
info =
Filename: 'image.jpg'
FileModDate: '26-Oct-2011 15:40:27'
FileSize: 146519
Format: 'jpg'
FormatVersion: ''
Width: 260
Height: 170
BitDepth: 24
ColorType: 'truecolor'
FormatSignature: ''
NumberOfSamples: 3
CodingMethod: 'Huffman'
CodingProcess: 'Lossless'
Comment: {}
Trial 4: Did not work.
>> imwrite(g,'image.jpg','Quality',94);
>> info = imfinfo('image.jpg');
>> info
info =
Filename: 'image.jpg'
FileModDate: '26-Oct-2011 15:27:41'
FileSize: 51299
Format: 'jpg'
FormatVersion: ''
Width: 260
Height: 170
BitDepth: 24
ColorType: 'truecolor'
FormatSignature: ''
NumberOfSamples: 3
CodingMethod: 'Huffman'
CodingProcess: 'Sequential'
Comment: {}
Trial 5: Did not work.
>> imwrite(g,'image.jpg','Quality',93);
>> info = imfinfo('image.jpg');
>> info
info =
Filename: 'image.jpg'
FileModDate: '26-Oct-2011 15:28:19'
FileSize: 48214
Format: 'jpg'
FormatVersion: ''
Width: 260
Height: 170
BitDepth: 24
ColorType: 'truecolor'
FormatSignature: ''
NumberOfSamples: 3
CodingMethod: 'Huffman'
CodingProcess: 'Sequential'
Comment: {}
Note trials 4 and 5: With quality 94, filesize is 51299; with quality 93, filesize is 48214; and internet sourced file that works has filesize 50434.
Sorry it probably looks like i am spamming this page, but I want to present as much information as possible.
I tried imwrite() with <'mode', 'lossless'> as well as <'Quality', 100>. No success. I will continue to look into this. If you think of any possibilities or things I should look into, that might crop up in your mind, please do let me know. Thank you for your help so far.
-Regards-

Sign in to comment.

The array may be lacking the full data structure. The site http://radio.feld.cvut.cz/matlab/techdoc/printing/export21.html gives a method for establishing the structure and then using imwrite to produce a valid jpg.
figure;imagesc(data) I = getframe(gcf); imwrite(I.cdata, 'myplot.jpg', 'Quality', 50);

Asked:

on 21 Oct 2011

Edited:

DGM
on 29 Dec 2023

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!