We Keep Coding

How do I load the image from file chooser and get it to load on the canvas so that i can edit it using Javascript?

I have been using a pixel editor called pixel paint and I wanted to create a button that allows me to load any image onto the canvas. Currently, I have been researching and testing multiple methods online and I am still struggling to get the image loaded in. Here is the code for the script.js method.
function showSelectedFile(){
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var img = new Image();
var file = document.getElementById("inputfile");
var name = file.value.replaceAll("\\","").replace("C:fakepath","").replace(".png","");
document.getElementById("myText").value = name;
window.URL = window.URL || window.webkitURL;
img.onload = function()
{
context.drawImage(img,0,0)
}
img.src = "/Users/angadp/Dropbox/Mac/Downloads/pixel-paint-master/" + name + ".png";
}
Also, in the script.js file I have tried to use
var canvas = document.getElementById("canvas-div")
but it gets the following error
Uncaught TypeError: canvas.getContext is not a function
In the index.html file the code is currently using <div id="canvas-div"></div>. So I am not really sure how to load the image onto the canvas that is using the div tag. Also at the beginning of the html file I am using <input id='inputfile' type='file' accept = ".png" name='inputfile' onChange='showSelectedFile()'> which makes the choose file button.
I also have a picture of pixel paint so that you would know what I am talking about.
Can you please provide me with some help on how to solve all these solutions. Thank you. I have also attached the hyperlink to the original pixel-paint so that you can download and test it.
Pixel Editor Menu for you to download and test

You can load image on change of file. Then createObjectURL (that's data:something;base64). Then load it on an image finally draw it on the <canvas>.
function loadFile(event) {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext('2d');
var dummy = document.getElementById('dummy');
dummy.src = URL.createObjectURL(event.target.files[0]);
dummy.onload = function() {
ctx.drawImage(dummy, 0, 0, 600, 300);
// Set line width
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
// free memory
URL.revokeObjectURL(dummy.src)
dummy.parentNode.removeChild(dummy)
}
};
canvas {
width: 600px;
height: 300px;
}
<input type="file" accept="image/*" onchange="loadFile(event)">
<canvas></canvas>
<img id="dummy" />

Input onchange javascript function call not working in Safari

I have an html canvas that shows a preview of an image when the image is selected in an input. This works in Chrome, but I can't seem to get it to work in Safari. Specifically - in Safari - the onchange="previewFile()" does not seem to call the previewFile function.
<canvas id="canvas" width="0" height="0"></canvas>
<h2>Upload a photo </h2>
<input type="file" onchange="previewFile()"><br>
<script type="text/javascript">
// setup the canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// grab the photo and display in canvas
var photo = new Image();
function previewFile() {
var file    = document.querySelector('input[type=file]').files[0];
var reader  = new FileReader(); 
reader.addEventListener("load", function () {
photo.src = reader.result;
canvas.height = photo.height;
canvas.width = photo.width;
ctx.drawImage(photo,0,0);
}, false);
if (file) {
  reader.readAsDataURL(file);
}
}
</script>

Your problem is certainly due to the fact that you are not waiting for the image has loaded before you try to draw it on the canvas.
Even wen the source is a dataURI, the loading of the image is asynchronous, so you need to wrap your drawing operations in the image's onload event.
var photo = new Image();
photo.onload = function(){
canvas.height = photo.height;
...
}
...
reader.onload = function(){
// this will eventually trigger the image's onload event
photo.src = this.result;
}
But if all you need is to draw your image on the canvas, don't even use a FileReader, actually, the readAsDataURL() method should trigger a I'm doing something wrong error in your brain. Almost all you can do with a dataURI version of a Blob, you can also do it with the Blob itself, without computing it nor polluting the browser's memory.
For example, to display an image for user input, you can use URL.createObjectURL(blob) method.
// setup the canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// grab the photo and display in canvas
var photo = new Image();
// drawing operations should be in the mage's load event
photo.onload = function() {
// if you don't need to display this image elsewhere
URL.revokeObjectURL(this.src);
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
}
photo.onerror = function(e) {
console.warn('file format not recognised as a supported image');
}
file_input.onchange = function() {
// prefer 'this' over DOM selection
var file = this.files[0];
var url = URL.createObjectURL(file);
photo.src = url;
};
<canvas id="canvas" width="0" height="0"></canvas>
<h2>Upload a photo </h2>
<input type="file" id="file_input">
<br>
And for those who need to send this file to their server, use a FormData to send directly the Blob. If you really need a dataURI version, then convert it server-side.

Why do I have to redraw the image after changing the canvas size?

I'm trying to create a small meme generator that allows the user to use any URL he/she wants and change the size of the image. Everything's working the way it should, but I noticed, if there's already an image on the canvas and the user decides to change the canvas size, the image is "erased". Why does this happen and is there a way to prevent it from happening?
JS
window.onload = function(){
var canvas = document.getElementById("main");
var ctx = canvas.getContext("2d");
var open_image = document.getElementById("open_in_new_window");
var change_img_size = document.getElementById("change_img_size");
var get_canvas_width = canvas.getAttribute("width");
var get_canvas_height = canvas.getAttribute("height");
var image = new Image();
image.onload = function(){
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
console.log("Image drawn");
}
open_image.addEventListener("click", function(){
var user_img = document.getElementById("input_url").value;
image.src = user_img;
console.log(user_img);
})
change_img_size.addEventListener("click", function(){
var set_canvas_width = document.getElementById("change_img_width").value;
var set_canvas_height = document.getElementById("change_img_height").value;
console.log(set_canvas_width, set_canvas_height);
canvas.setAttribute("width", set_canvas_width);
canvas.setAttribute("height", set_canvas_height);
})
}
HTML
<canvas id="main" width="450" height="550"></canvas>
<div id="user_actions">
<input type="text" id="input_url" placeholder="Input image location." />
<input type="text" id="change_img_width" placeholder="Change image width." />
<input type="text" id="change_img_height" placeholder="Change image height." />
<button id="open_in_new_window">View Image</button>
<button id="change_img_size">Change Image Size</button>
</div>
Here's a Pen

The relevant part of the spec:
When the user agent is to set bitmap dimensions to width and height,
it must run the following steps:
Reset the rendering context to its default state.
Clear the scratch bitmap's hit region list and its list of pending
interface actions.
Resize the scratch bitmap to the new width and height and clear it to
fully transparent black.
If the rendering context has an output bitmap, and the scratch bitmap
is a different bitmap than the output bitmap, then resize the output
bitmap to the new width and height and clear it to fully transparent
black.
You can try getImageData() before resizing the canvas, and then putImageData() after, but I'm not sure if the same-origin policy will allow it.
If you don't need to change the intrinsic size of the canvas, you can change canvas.style.width and canvas.style.height, this will not erase the canvas.

Creating image from two other images using javascript [duplicate]

I am wondering if there is a way to combine multiple images into a single image using only JavaScript. Is this something that Canvas will be able to do. The effect can be done with positing, but can you combine them into a single image for download?
Update Oct 1, 2008:
Thanks for the advice, I was helping someone work on a js/css only site, with jQuery and they were looking to have some MacOS dock-like image effects with multiple images that overlay each other. The solution we came up with was just absolute positioning, and using the effect on a parent <div> relatively positioned. It would have been much easier to combine the images and create the effect on that single image.
It then got me thinking about online image editors like Picnik and wondering if there could be a browser based image editor with photoshop capabilities written only in javascript. I guess that is not a possibility, maybe in the future?

I know this is an old question and the OP found a workaround solution, but this will work if the images and canvas are already part of the HTML page.
<img id="img1" src="imgfile1.png">
<img id="img2" src="imgfile2.png">
<canvas id="canvas"></canvas>
<script type="text/javascript">
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = img1.width;
canvas.height = img1.height;
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0);
context.globalAlpha = 0.5; //Remove if pngs have alpha
context.drawImage(img2, 0, 0);
</script>
Or, if you want to load the images on the fly:
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img1 = new Image();
var img2 = new Image();
img1.onload = function() {
canvas.width = img1.width;
canvas.height = img1.height;
img2.src = 'imgfile2.png';
};
img2.onload = function() {
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0);
context.globalAlpha = 0.5; //Remove if pngs have alpha
context.drawImage(img2, 0, 0);
};
img1.src = 'imgfile1.png';
</script>

MarvinJ provides the method combineByAlpha() in which combines multiple images using its alpha channel. Therefore, you just need to have your images in a format that supports transparency, like PNG, and use that method, as follow:
Marvin.combineByAlpha(image, imageOver, imageOutput, x, y);
image1:
image2:
image3:
Result:
Runnable Example:
var canvas = document.getElementById("canvas");
image1 = new MarvinImage();
image1.load("https://i.imgur.com/ChdMiH7.jpg", imageLoaded);
image2 = new MarvinImage();
image2.load("https://i.imgur.com/h3HBUBt.png", imageLoaded);
image3 = new MarvinImage();
image3.load("https://i.imgur.com/UoISVdT.png", imageLoaded);
var loaded=0;
function imageLoaded(){
if(++loaded == 3){
var image = new MarvinImage(image1.getWidth(), image1.getHeight());
Marvin.combineByAlpha(image1, image2, image, 0, 0);
Marvin.combineByAlpha(image, image3, image, 190, 120);
image.draw(canvas);
}
}
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<canvas id="canvas" width="450" height="297"></canvas>

I don't think you can or would want to do this with client side javascript ("combing them into a single image for download"), because it's running on the client: even if you could combine them into a single image file on the client, at that point you've already downloaded all of the individual images, so the merge is pointless.

Canvas Layers (Z Index)

I understand that Canvas is as ink dries and each item that is draw is on top.
I'm having a little problem, I have a list of sources of background images
var sources = {
bg: 'images/room-1/bg.png',
rightWall: 'images/room-1/wall-right.png',
leftWall: 'images/room-1/wall-left.png',
beam: 'images/room-1/beam-left.png',
sofa: 'images/room-1/sofa.png'
};
loadImages(sources, function(images) {
context.drawImage(images.bg, 0, 0, 760, 500);
context.drawImage(images.rightWall, 714, 0, 46, 392);
context.drawImage(images.leftWall, 0, 160, 194,322);
context.drawImage(images.beam, 0, 45, 143,110);
context.drawImage(images.sofa, 194, 280, 436,140);
});
This is fine and they order how I like.
My issue is I have an image upload for a user to upload their image into the Canvas.
I am just using an upload box to test the theory, but the idea is the user will upload their image, crop, scale it, using JQuery / PHP and this saves the image. I will then grab this manipulated URL and pull this in, however the problem is that the Canvas is loaded so when i upload an image, it goes on top off the sources image.
I do not want to use multiple Canvas as I need to save this canvas as an image as a whole.
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = 760;
canvas.height = 300;
}
img.src = event.target.result;
img.onload = function(){
context.drawImage(img, 0, 0);
};
}
reader.readAsDataURL(e.target.files[0]);
}

Canvas does not have layers.
But you can still get 1 final image with both your background and your user's scaled/rotated foreground.
Since you want to let the user rotate/scale their image but you don't want to affect the background, you will need 2 canvases -- a background canvas and a user canvas.
// HTML
<div id="container">
<canvas id="background" class="subcanvs" width=760 height=300></canvas>
<canvas id="canvas" class="subcanvs" width=760 height=300></canvas>
</div>
// CSS
#container{
position:relative;
border:1px solid blue;
width:760px;
height:300px;
}
.subcanvs{
position:absolute;
}
// JavaScript
// a background canvas
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");
// a foreground canvas the user can rotate/scale
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
Then when the user is done rotating/scaling, drawImage the users canvas to the background canvas.
// combine the users finished canvas with the background canvas
bkCtx.drawImage(canvas,0,0);
// and save the background canvas (now it's combined) as an image
var imageURL=background.toDataURL();