Develop Reference

JS-Convert an Image object to a jpeg file

So, I have a user input which serve to upload pictures. This is a simple example:
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
console.log (img);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
<input type="file" onchange="handleImage(event)"><br>
As you can see, I display an Image () on the console. I want to convert this Image into a jpg file.
I understood how to get the pixels of the picture but it's completely crazy to send it to a server: It's to large!
I also tried to access to the jpg file stored in the computer but I do not achieve to anything.
The only way I found is to send it with a form like this:
<form action="anything.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
</form>
And in PHP:
$_FILES["fileToUpload"]["tmp_name"]
Why not with JS?
My final goal is to send the jpg file with AJAX.
Tell me if you have some questions.

The simplest way is to use a canvas element and then invoke a download action allowing the user to select where to save the image.
You mention that the image is large, but not how much - be aware that with canvas you will also run into restrictions when the image source starts to touch around the 8k area in pixel size.
A simplified example (IE will require a polyfill for toBlob()).:
Load image source via input
Use File blob directly as image source via URL.createObjectURL()
When loaded, create a temporary canvas, set canvas size = image size and draw in image
Use toBlob() (more efficient on memory and performance and require no transcoding to/from Base64) to obtain a Blob.
We'll convert the Blob to File (a subset object and it will reference the same memory) so we can also give a filename as well as (important!) a binary mime-type.
Since the mime-type for the final step is binary the browser will invoke a Save as dialog.
document.querySelector("input").onchange = function() {
var img = new Image;
img.onload = convert;
img.src = URL.createObjectURL(this.files[0]);
};
function convert() {
URL.revokeObjectURL(this.src); // free up memory
var c = document.createElement("canvas"), // create a temp. canvas
ctx = c.getContext("2d");
c.width = this.width; // set size = image, draw
c.height = this.height;
ctx.drawImage(this, 0, 0);
// convert to File object, NOTE: we're using binary mime-type for the final Blob/File
c.toBlob(function(blob) {
var file = new File([blob], "MyJPEG.jpg", {type: "application/octet-stream"});
window.location = URL.createObjectURL(file);
}, "image/jpeg", 0.75); // mime=JPEG, quality=0.75
}
// NOTE: toBlob() is not supported in IE, use a polyfill for IE.
<label>Select image to convert: <input type=file></label>
Update: If you just are after a string (base-64 encoded) version of the newly created JPEG simply use toDataURL() instead of toBlob():
document.querySelector("input").onchange = function() {
var img = new Image;
img.onload = convert;
img.src = URL.createObjectURL(this.files[0]);
};
function convert() {
URL.revokeObjectURL(this.src); // free up memory
var c = document.createElement("canvas"), // create a temp. canvas
ctx = c.getContext("2d");
c.width = this.width; // set size = image, draw
c.height = this.height;
ctx.drawImage(this, 0, 0);
// convert to File object, NOTE: we're using binary mime-type for the final Blob/File
var jpeg = c.toDataURL("image/jpeg", 0.75); // mime=JPEG, quality=0.75
console.log(jpeg.length)
}
<label>Select image to convert: <input type=file></label>

JavaScript on the client side can not save files.
You have multiple options:
Render the image on an <canvas> element. This way it can be saved with right click -> save image
Inset the image as <img> element. This way it can be saved with right click -> save image
Send the image data as base64 string to the server. Do the processing there
Use a server side language like PHP or Node.js to save the file
Long story short, you have to use some server side logic to save the file on disk

jsPDF Incomplete or corrupt PNG file

Adding regular png images was no problem with jsPDF, but now i send a generated image from my server and the browser console displays this error when rendering the PDF file:
Incomplete or corrupt PNG file
obviously the image is not incomplete or corrupt because i can see the response from the server and the image is fine.
Also to avoid render the pdf file before the image is ready i make a check to a that holds the image value variable if is undefined/null.
the format of my image is
var image = "data:image/png;base64,iVBORw0KGgoAAAANSUh...etc";
What could be the problem?
Edit: i changed the format of the image to jpg and this error shows
Supplied data is not a JPEG
if i use this library jspdf.plugin.addimage.js the images are rendered correctly but not the png images.
edit: 2 i made a solution modifying the jspdf.plugin.addimage.js file function addImage, i just changed the name of the function and added those generated images to pdf with that function, since the version of jspdf.min.js has the same name for the same function with this way it won't override the function i can use the one that works with normal images and the ones generated by the server.

This type of error occurs because the image has not finished loading when you send to jsPdf, use onLoad event to check the image loaded completely. for Example -
/* where src = full image url
callback = is callback function
outputFormat = image output format */
function toDataUrl(src, callback, outputFormat) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function () {
/*image completely converted to base64string */
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
/* call back function */
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = appConfig.config.dummyImage;
img.src = src;
}
}
function callbackBase64(base64Img)
{
/*base64Img contains full base64string of image */
console.log(base64Img);
}
call above function and get base64string of image -
toDataUrl('http://example1.com/image1.jpg', callbackBase64(base64Img), "image/png");

svg to png not working, suspect svg element differences

Im having trouble figuring out why two different svg's would cause my javascript to work in one instance, but not in the other. I have only swapped out the svg elements in both examples, one works, one does not. Here is the code in two jsFiddles. The working example I got from here.
Ultimately, my goal is to save the current svg element of the floor plan, and insert the converted png as an inline img inside a rich text area. As if you took a cropped screenshot of the floor plan, and pasted it into a rich text area like you see in helpdesk sites. Im just having trouble converting to png.
Working: JsFiddle
Not Working: JsFiddle
Here is the js, i cant add the svg code or it will put me over the character limit of Stackoverflow.
var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>';
DOMURL.revokeObjectURL(png);
};
img.src = url;
Edit:
I have since settled on this code omitting the png/canvas conversions, and trying to place the serialized string of the svg, directly to the rich text area, but it gets an error in IE, Non-default namespace declarations must not have an empty URI. Line: 1, column142
var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));
var img = new Image();
var url = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgString);
img.onload = function() {
document.querySelector('.ze_body').innerHTML = '<img src="'+url+'"/>';
};
img.src = url;
Also i think it would help if i showed more of the structure of how this rich text area currently sits. This is not our doing, its a product we use, and im just trying to get maps to paste into the description area so it can live with the ticket. Only access we have is js triggered from rules in the form.
Screenshot of ze_body element as it stands in the DOM

It comes from your namespace declaration :
Change xmlns:NS1="" NS1:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:NS2="" NS2:xmlns:cc="http://creativecommons.org/ns#" xmlns:NS3="" NS3:xmlns:dc="http://purl.org/dc/elements/1.1/"
to xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> and it should work.
Also note that since you are using XMLSerializer().serializeToString(), you don't need to create a blob and an objectURL, you can only pass data:image/svg+xml; charset=utf8, " and the encodeURIComponent(svgString) as the url of your image. (fiddle).
ps: You can read about namespace declaration here.

Loading an image with external js file

I'm trying to load an image using an external js file that contains the following:
myimage = new Image(1,1);
myimage.src = 'http://myserver.com/pixel.gif';
I see the js file loaded and no error in the console, but also no call to my image pixel. Any idea?
EDIT:
After the first responses I tried the following and it still doesn't work:
var myimage = document.createElement("img");
myimage.src = 'http://myserver.com/pixel.gif';
myimage.height = "1";
myimage.width = "1";
document.body.appendChild(myimage);

The image needs to be inserted into the page/DOM.
The image will not be called until it is placed into the page/DOM directly, and therefore loaded.
What you want will happen with something like: document.body.appendChild(myimage)

There is an example of how to do this at http://www.w3schools.com/tags/canvas_drawimage.asp by inserting the image into a canvas.
A small modification which I found makes this work better is putting the drawImage line into an img.onload callback like this:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload(function() {ctx.drawImage(img,10,10);});

Image on local disk is not loading in Tomcat project configuration

I am working on a project using HTML5 and JavaScript. I am loading an image from the C: drive like this:
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = "file:///C:/Images/Demo.jpg";
};
The image is loading perfectly on this page. When try the same thing in my project, the image won't load in a canvas element. I am getting the following error from the browser:
Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE)[nsIDOMCanvasRenderingContext2D.drawImage]
How can this problem be solved?

On Project its not advisable to use direct path you should use a related path as per your server directory
as '<%=request.getContextPath()%>'/Remaing_path_from_webContent_folder_of_project
Hope it will work