I'm currently working on a Image editor and I have it inside of a Canvas, and It's changing the picture that is inside of the Canvas, but when you go to right click and save the image as, it comes out as the original image still not the edited one, I also had this problem even when It wasn't inside of the Canvas.
Here's What it looks Like Edited in the Canvas:
Edited Image
And What it Looks Like After You save it: Saved Image
Here's My Filters Code:
<script type="text/javascript">
$(document).ready(function()
{
$(".range").change(add_filter).mousemove(add_filter);
});
function add_filter()
{
var grayscale_val=$("#grayscale").val();
var blur_val=$("#blur").val();
var exposure_val=$("#exposure").val();
var sepia_val=$("#sepia").val();
var opacity_val=$("#opacity").val();
$("#canvas").css("-webkit-filter","grayscale("+grayscale_val+"%) blur("+blur_val+"px) brightness("+exposure_val+"%) sepia("+sepia_val+"%) opacity("+opacity_val+"%)");
}
</script>
Here's my HTML :
<div id="buttons">
<li>GrayScale<br><input id="grayscale" class="range" type="range" min="0" max="100" value="0"></li>
<li>Blur<br><input id="blur" class="range" type="range" min="0" max="10" value="0"></li>
<li>Exposure<br><input id="exposure" class="range" type="range" min="0" max="200" value="100"></li>
<li>Sepia<br><input id="sepia" class="range" type="range" min="0" max="100" value="0"></li>
<li>Opacity<br><input id="opacity" class="range" type="range" min="0" max="100" value="100"></li>
<div id="image_div">
<canvas id="canvas" id="edit_image" height="600" width="600" ></canvas>
<input type='file' name='img' id='uploadimage' />
</div>
Code That Will upload the selected Image into the Canvas:
function draw(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", draw, false)
</script>
Thank You In Advance!
Related
this is the small part code which i have write but its not working and img is the variable which i have store img ID in it
let filtercn=document.querySelectorAll('input[type=range]');
<div >
<span>Blur</span>
<input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()" data-filter="blur" data-scale="px"><br>
</div>
function applyFilter(){
let fl='';
filtercn.forEach(function(s){
fl+=s.getAttribute('data-filter')+'('+s.value+s.getAttribute('data-scale') +')';
});
img.style.filter=fl;
};
Editing on Riccardo LV's Answer without putting it in a different css file just do the following,
function applyFilter(img){
img.css.filter = "blur(10px)";
}
Not exacly what you asked, but I'd do it via CSS:
filter: blur(10px);
EDIT
You can also do something like this (jQuery or JS are either ok of course):
onchange="$(this).css('filter','blur(10px)');"
Your code is not wrong;
This is what you have used, just a bit cleaner and it does work :)
let filtercn = document.querySelectorAll('input[type=range]');
let img = document.querySelectorAll('img')[0];
function applyFilter() {
let fl = '';
filtercn.forEach(function(s) {
fl += s.getAttribute('data-filter') + '(' + s.value + s.getAttribute('data-scale') + ')';
});
img.style.filter = fl;
};
<div>
<span>Blur</span>
<input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()" data-filter="blur" data-scale="px">
<img src="https://lh3.googleusercontent.com/a-/AOh14Gghf3M5ETbqkndUt57cgaUALuAW2cJ_o-O7r4H7=k-s64">
</div>
There is no image in your code. so added an image and made the function more simple.
function applyFilter() {
let image = document.getElementById("image");
let blurVal = document.getElementById("blur").value;
image.style.filter = "blur("+blurVal+"px)"
}
#image {
width: 300px;
}
<div >
<span>Blur</span>
<img id="image" src="https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782_960_720.jpg" alt="">
<input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()"><br>
</div>
I have this bit of code and I was wondering if it is possible to change the size of the image just by moving the slider:
<div class="slidecontainer">
<input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
Can anyone help pls?
You can add an eventListener to the range and then apply your logic there to change the dimension of the image.
const slider = document.getElementById('Slider');
slider.addEventListener('input', handleChange);
function handleChange(e) {
const img = document.getElementById("Elon");
const {value, max} = e.target;
img.style.width = `${value*max}px`;
img.style.height = `${value*max}px`;
}
<div class="slidecontainer">
<input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
Something like:
document.getElementById("Slider").addEventlistener("change", (value) => {
let image = document.getElementById("Elon");
image.style.width = value;
image.style.height = value;
});
Notice, this is just a sketch and will prob not work if u just copy and paste it.
Change img width on slider change. Something like below
const sliderElem = document.getElementById('Slider');
const imageElem = document.getElementById('image');
function sliderChange() {
const width = image.getAttribute('width');
image.setAttribute("width", Number(width) + Number(sliderElem.value));
}
<div class="slidecontainer">
<input onChange="sliderChange()" type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img id="image" width="150" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
You need to use some javascript for this
Here is the code you can run and see it.
If you want more zoom then instead of x*10 write 20 or 30 according to your choice.
document.getElementById("Slider").oninput = function changeImageSize(){
var x = document.getElementById("Slider").value;
document.getElementById("Elon").style.height=String(x*10) + "px";
}
<div class="slidecontainer">
<input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
I have a Javascript slider bar which uses an array for the options. However, It does not change as you drag.
var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];
function setImage(obj) {
var value = obj.value;
img.src = img_array[value];
}
<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />
can anyone give me some guidance on how to change the image while I am dragging the slider, rather than when I let go of the mouse button
Use oninput instead of onchange
(Get value of slider while it's being moved?)
var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];
function setImage(obj) {
var value = obj.value;
img.src = img_array[value];
}
<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input oninput='setImage(this)' type="range" min="0" max="1" value="0" step="1" />
im working on a slider in html, that will show different images depending on the slider value.
so if the slider is set to value 1, image1.jpg is shown, value 2 will show image2.jpg and so on.
I have found the slider part on w3schools and has managed to output new images to it. link to w3schools slider
But i dont know how to refresh the images, for now the code just prints a new one by the olds images side. i++
does anyone know how to refresh image, instead of printing a one new every time.
Any help would be appreciated!
var slider = document.getElementById("myRange");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
var x = document.createElement("IMG");
x.setAttribute("src", "image" + this.value + ".jpg");
document.body.appendChild(x);
}
<div class="slidecontainer">
<input type="range" min="1" max="2" value="1" class="slider" id="myRange">
<p>Value: <span id="value"></span></p>
</div>
You can just use the img element with the default image or src value:
var slider = document.getElementById("myRange");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
var img = document.getElementById("img");
img.setAttribute("src", "https://loremflickr.com/320/240/" + this.value);
}
<div class="slidecontainer">
<input type="range" min="1" max="5" value="1" class="slider" id="myRange">
<p>Value: <span id="value"></span></p>
<img src="https://loremflickr.com/320/240/1" alt="" id="img">
</div>
How do I combine outputs of the two functions to do some operations on the two values?
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
</div>
</div>
And the JS is:
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
function xLevel(newVal) {
xout.innerHTML = newVal;
}
function yLevel(newVal) {
yout.innerHTML = newVal;
}
So how do I combine the two values, x and y, to eg. multiply them and display them in yet another div?
Thanks
Store the new values in their own variables in the top-level scope, and then manipulate them in a separate function.
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
var multout = document.getElementById('mult');
var xval;
var yval;
function xLevel(newVal) {
xout.innerHTML = newVal;
xval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function yLevel(newVal) {
yout.innerHTML = newVal;
yval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function updateMultiplier() {
multout.innerHTML = yval * xval;
}
and then for your markup:
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
<p id="mult"></p>
</div>
</div>