Develop Reference

How do I add a download button that will download the image after making changes?

I am working on a photo editor and I want to add a download button that will download the image after the user makes the necessary changes. The changes are working fine but I am not able to figure out how to download the image (Please keep in mind that the filter value depends on the user and is not constant). Does anyone have any ideas on how I can proceed further?
(P.S. I searched all over Stack Overflow and tried to implement every solution in my code but nothing's working)
Here's my HTML:
<!-- upload image button -->
<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;" id="fileBtn">UPLOAD IMAGE</label></p>
<p><img id="img"></p>
<!-- side nav -->
<div class="sidenav">
<label for="filter-select">FILTER AND ADJUST</label>
<div class="slider">
<p style="color: aliceblue;">Sepia</p>
<input id="sepia" type="range" oninput="setSepia(this);" value="0" step="0.1" min="0" max="1"><span id="Amount" style="color: white;"> 0</span><br/><br>
<p style="color: aliceblue;">Grayscale</p>
<input id="Grayscale" type="range" oninput="setGs(this);" value="0" step="0.1" min="0" max="1"><span id="Amount2" style="color: white;"> 0</span><br/><br>
</div>
<label onclick = "RotateImg()">ROTATE</label>
<label onclick = "flipping()">FLIP</label>
<label onclick = "invert()">INVERT COLOURS</label>
<label onclick = "original()">ORIGINAL</label>
</div>
Here's my JavaScript:
function loadFile(event) {
var image = document.getElementById('img');
image.src = URL.createObjectURL(event.target.files[0]);
}
const options = {
sepia: 0,
grayscale: 0,
rotation: 0,
scale: 1,
invertVal: 0
};
function setSepia(e){
options.sepia = e.value;
document.getElementById('Amount').innerHTML= e.value;
redraw();
}
function setGs(e){
options.grayscale = e.value;
document.getElementById('Amount2').innerHTML= e.value;
redraw();
}
let rotation = 0;
function RotateImg(){
rotation += 90;
if (rotation == 360) {
rotation = 0;
}
options.rotation = rotation;
redraw();
}
let scale = 1
function flipping() {
scale -= 2
if (scale <= -2) {
scale = 1;
}
options.scale = scale;
redraw();
}
let invertVal = 0
function invert() {
invertVal += 100
if (invertVal > 100) {
invertVal = 0
}
options.invertVal = invertVal;
redraw();
}
function original() {
document.getElementById("img").style["webkitFilter"] ="sepia(0) grayscale(0)";
document.querySelector("img").style.transform = "rotate(0deg) scaleX(1)";
}
function redraw() {
document.getElementById("img").style["webkitFilter"] ="sepia(" + options.sepia + ") grayscale(" + options.grayscale + ");
document.querySelector("img").style.transform = `rotate(${options.rotation}deg) scaleX(${options.scale})`;
}

Your best bet would be to use the Canvas API to apply your edits and then use toDataURL to set up the download.
Here's a proof of concept fiddle:
<div id="container">
<img src="//placekitten.com/400/400" crossorigin="anonymous"/>
<canvas width="400" height="400" />
</div>
const canvas = document.querySelector('canvas');
const image = document.querySelector('img');
image.addEventListener('load', () => {
const ctx = canvas.getContext('2d');
// draw the image into the canvas with a sepia filter:
ctx.filter = 'sepia(1)';
ctx.drawImage(image, 0, 0);
// set up the download link
addDownload(canvas);
})
function addDownload (canvas) {
// create an <a>
const a = document.createElement('a');
// set it up to download instead of navigating
a.setAttribute('download', 'kitten.jpg');
a.innerHTML = "download";
// set the href to a data url for the image
a.href = canvas.toDataURL('image/jpg');
// append it to the dom
container.appendChild(a);
}

How can I get my function to display text over an image?

I'm trying to input text into a html form field (button) which will then be displayed on the same page over an image. Any advice of how I could get the two talking to each other would be really appreciated.
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img =new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 900, 600);
function myFunction() {
document.getElementById("line1").innerHTML;
var line1 = document.getElementById("line1").value;
var line2 = document.getElementById("line2").value;
var line3 = document.getElementById("line3").value;
}
//the code below positions the overlaying text on the image
ctx.font = "bold 36px Times";
ctx.fillStyle = "black";
ctx.fillText ("line1",400,325);
ctx.fillText ("line2",400,375);
ctx.fillText ("line3",400,425);
}
//this is the image
img.src= "bus_red.gif"
</script>
//the code below allows the user to input text into boxes
<div>
<form>
<label for="line1">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
<label for="line2">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line2"><br>
<label for="line3">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line3"><br>
//Click the "click-me' button to return the text on the "HTML" button
<button onclick="myFunction()">Click me</button>
</form>
</div>

Try this. For the button, the element being displayed only stays if the user keep on holding the button. Thus I changed it to a radio box where you can style it into a button.
The button has been linked with the canva and the inserted in the different textbox are being displayed respectively.
Edit: I have added a reset code to reset the canva and also styled the two "buttons".
Tested and works
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
function myFunction() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img =new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 900, 600);
}
//the code below positions the overlaying text on the image
ctx.font = "bold 36px Times";
ctx.fillStyle = "black";
ctx.fillText ( document.getElementById("line1").value ,400,325);
ctx.fillText ( document.getElementById("line2").value ,400,375);
ctx.fillText ( document.getElementById("line3").value ,400,425);
}
img.src= "images/image1.jpg"
function myFunction2() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
//this is the image
</script>
//the code below allows the user to input text into boxes
<div>
<form>
<label for="line1">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
<label for="line2">Enter your text: </label>
<input type="text" autocomplete="off" id="line2" placeholder="line2"><br>
<label for="line3">Enter your text: </label>
<input type="text" autocomplete="off" id="line3" placeholder="line3"><br>
//Click the "click-me' button to return the text on the "HTML" button
<a id="input-button" onclick="myFunction()">Click me</a>
Reset
</form>
</div>
<style>
#input-button {
padding: 2em;
background-color: black;
color: #fff;
}
#input-reset {
padding: 2em;
background-color: black;
color: #fff;
text-decoration: none;
}
</style>

How to create a canvas with a circle inside it everytime a button is clicked

I am stuck with a code and my job is to keep on adding canvas when button is clicked. this canvas should also hold a circle. Whenever a button is clicked it should result in displaying a new canvas with a circle inside beside older ones(canvas that are created earlier). Please Help.
This is my code
The two canvases created are default on page and new ones should be created upon clicking the button
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillText("Alex", 10, 50);
var d = document.getElementById("myCanvas1");
var ctx1 = d.getContext("2d");
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.fillText("Clay", 10, 50);
</script>
<script>
function fun(){
var e = document.getElementById("myCanvas2");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
}
</script>
<br><br>
<button type="button" onclick="fun()">+</button>
</body>
</html>

Alright, so what I did was I took part of your code(for the circle), and did what you asked!
in this JsFiddle (https://jsfiddle.net/jrhvcrtm/), When you click the button, you get a new div, with the same properties as the other one, with a circle inside.
Just use this in your own code, and if you didn't realize yet, it uses jQuery in it.
Here is a snippet:
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
$('#button').click(function() {
var el = $("#test"),
newone = el.clone(true);
el.before(newone);//This line is added just for styling
});
$('#button').click(function() {
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
});
#test {
height:100px;
width:200px;
border: 3px solid black;
margin-left: 50px;
margin-top: 50px;
}
#button {
height:50px;
width:50px;
border: 3px solid black;
margin-left: 200px;
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="button">
Click
</button>
<canvas id="test" class="test"></canvas>

Instead of var e = document.getElementById("myCanvas2"), create a new canvas, then append it to your body.
var e = document.createElement('canvas') // create new canvas
document.body.appendChild(e) // make it accessible on the DOM
var ctx2 = e.getContext("2d")
// remain the same code ...
You may also put all canvas in a <div id="canvases"></div> for a better management. Then the onclick listener will be as following code.
var e = document.createElement('canvas')
var canvasContainer = document.getElementById('canvases')
document.body.appendChild(canvasContainer)
var ctx2 = e.getContext("2d")
// remain the same code ...

How to convert form text to image when submit

Hi Guys, I'm trying to solved this kind of form that when I clicked the submit button in a form the output will become image/picture and all the data that are in the fields will be compiled too in the image.
I would love and appreciate your kindness if you could help me to solve this kind of problem.
Please check image as my sample.

Client-side you can use canvas to draw a text as an image.
var canvas = document.querySelector('canvas');
document.querySelector('form').addEventListener('submit', function(event) {
var ctx = canvas.getContext('2d')
, line = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
[].forEach.call(event.srcElement.querySelectorAll('label'), function(label) {
ctx.fillText(label.textContent + label.querySelector('input').value, 20, (++line) * 20);
});
});
form, canvas { width: 500px }
canvas { height: 200px }
form > * { display: block }
form > * + * { margin-top: .5em; }
form input { width: 100% }
<form>
<label>Name: <input name="name"></label>
<label>Address: <input name="address"></label>
<button>draw</button>
</form>
<canvas></canvas>

Copy the textarea contents to a div, run html2canvas and upload the image via ajax:
$('#submit').click(function() {
var abc = $('#text1').val();
var def = $('#text2').val();
var ghi = $('#text3').val();
$('#container').html('<div class = text1>' + abc + '</div><div class = text2>' + def + '</div><div class = text3>' + ghi + '</div>');
html2canvas($('#container'), {
onrendered: function(canvas) {
myImage = canvas.toDataURL("image/png");
$('#image').append(canvas);
//$.ajax({
//data: myImage
// ....
}
});
});
#image {
border: 1px solid black;
margin: 10px;
width: 100px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<textarea id="text1">ABC</textarea>
<textarea id="text2">DEF</textarea>
<textarea id="text3">GHI</textarea>
<button id="submit">Submit</button>
<br>Your text will appear here ->
<br>
<div id="container"></div><br>
Your image will appear here ->
<br>
<div id="image"></div>

JS: change color square on canvas with just javascript

I'm tryin to change color on my squares without using jquery or CSS.
How can I change simultaneously all square color?
P.s.: I'm new in HTML5+JS.
Using this code I can change square color after click on the button. But I'd like to have a button that can change all squares already presented on canvas area.
HTML
<html>
<head>
<meta charset="utf-8">
<title>Paint Canvas</title>
</head>
<body>
<div id="container">
<canvas id="imageView" width="600" height="300" onclick="createRect(red, 20,20);"/>
</div>
<input type="button" value="Green" id="green" onclick="GreenRect()">
<input type="button" value="Red" id="red" onclick="RedRect()">
<input type="button" value="clear canvas" id="clear" onclick="ImgClr()">
</body>
</html>
CSS
canvas { border: 1px solid black;}
JavaScript
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
function createCircle(){
}
function createRect(fillColor, w, h) {
context.fillStyle = fillColor;
x = event.pageX;
y = event.pageY;
context.fillRect(x, y, w, h);
}
function GreenRect () {
context.fillStyle= 'green';
context.stroke();
}
function RedRect () {
context.fillStyle= 'red';
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, 600, 300);
}

Canvas squares you are drawing are not "Objects" like in Javascript.
You cannot change their color, technically speaking.
What you can do, though, is redraw them all with another color. Which is what I suggest.
You have the right parameter here:
function createRect(fillColor, w, h)
So you just want to do a createRect('red', ...)