I have a canvas, which handle images drawn on it with the CamanJS plugin and it works perfectly. But if I manipulate the canvas manually (without the aid of plugin) the image loses its effect. For example, if I add a filter (Vintage, for example) to the image, works perfectly, but if I turn the canvas, using translate and scale the canvas is reversed but the image loses its effect. It seems that with each change in the image through the plugin, it saves its current state, and therefore, the effect is lost after a change without using it. How to do this while preserving the effects of the image?
To add to the effect, use the same examples of the plugin site, since the code to reverse the canvas is (scripts.js):
$(document).ready(function() {
$("html, body").on("click", "#vintage", function() {
Caman("#filtrar", function() {
this.vintage().render();
});
});
$("html, body").on("click", "#inverter_foto", function() {
var c = $("#filtrar")[0];
var ctx = c.getContext("2d");
ctx.translate(filtro_width, 0);
ctx.scale(-1, 1);
ctx.drawImage(filtro, 0, 0);
});
});
The filtro_width variables and filtro correspond to the image drawn on the canvas.
on HTML:
<canvas id="filtrar" width="640" height="255"></canvas>
<button id="vintage">Vintage Effect</button>
<button id="inverter_foto">Reverse</button>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
</script>
<script type="text/javascript" src="/js/caman.full.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
Example:
If you do manipulate the canvas outside of the Caman library, you need to use the reloadCanvasData method to reinitialize the imageData stored in the Caman object, otherwise, it only uses the first one + what it updated itself.
vintage.onclick = function() {
Caman("#filtrar", function() {
this.vintage().render();
});
};
inverter_foto.onclick = function() {
var c = $("#filtrar")[0];
var clone = c.cloneNode(true);
var ctx = clone.getContext("2d");
ctx.translate(c.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(c, 0, 0);
var oCtx = c.getContext('2d');
oCtx.clearRect(0, 0, c.width, c.height);
oCtx.drawImage(clone, 0, 0);
if(check.checked){
Caman("#filtrar", function() {
this.reloadCanvasData();
});
}
};
var filtro = new Image();
filtro.crossOrigin = 'Anonymous';
var filtro_width = filtrar.width / 2;
filtro.onload = function() {
filtrar.getContext('2d').drawImage(this, 0, 0, filtrar.width, filtrar.height);
};
filtro.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<p>First revert the image then apply the effect</p>
<button id="inverter_foto">Reverse</button>
<button id="vintage">Vintage Effect</button>
reloadCanvasData<input id="check" type="checkbox" checked/>
<canvas id="filtrar" width="640" height="255"></canvas>
Related
I am learning html canvas and below is my html code.
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function moveImage(x) {
var context = document.getElementById('myCanvas').getContext("2d");
var img = new Image();
img.onload = function () {
context.drawImage(img, x, 259);
}
img.src = "flower.jpg";
}
function startDrawing() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50, 300);
context.lineTo(950, 300);
context.stroke();
var x=50;
setInterval(function() {
x = x+20;
moveImage(x);
}, 1000);
}
</script>
</head>
<body onload="startDrawing()">
<canvas id="myCanvas" width="1000" height="1000">
</body>
</html>
Please find the below output from this code:
How can I remove the traces of 'older frames' (of the flower), as you could see lots of flowers while it is moving from left to right in the screen shot ? Please help the code changes required.
Thanks.
The problem is you aren't clearing the canvas before drawing on it again. You can clear it using clearRect.
setInterval(function() {
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
x += 20;
moveImage(x);
}, 1000);
Keep in mind that this will clear the entire canvas. If you're rendering anything else, you'll want to redraw it after the clear.
You need to re-render the frame. Here's some code from an incomplete game I wrote:
var main = function () {
var now = Date.now(),
delta = now - then;
update(delta / 1000);
render();
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
GitHub repo code
My render function contains the context.drawImg() work (getting properly re-rendered), and that's similar to your moveImage function.
Edit: A little explanation. The image traces are previous renderings of the your image at each updated position. Without the frame itself being reset, each move of the image is preserved on the screen, giving the appearance of a trail of images.
I am trying to learn some new things and thought I experiment with canvas a bit.
I got a canvas element that loads an image that i want to draw over once i click an anchor.
HTML
Click Me
<canvas id="test" width=400 height=400></canvas>
Javascript
var c = document.getElementById("test");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'http://lorempixel.com/400/400/abstract';
$("#test").on('click', function() {
var c2 = document.getElementById('test').getContext('2d');
c2.fillStyle = '#76ff03';
c2.beginPath();
c2.lineTo(100, 50);
c2.lineTo(50, 100);
c2.lineTo(0, 90);
c2.closePath();
c2.fill();
});
All its meant to do is draw a red triangle on top the image that is loaded previously by the canvas.
Unfortunately i don't get anywhere with this.
Any help will be appreciated.
Apparently you are using the "$" function, which you are probably expecting from JQuery, but you are not including the JQuery script on your file.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
Apart from that, your code seems to work properly.
By the way, the triangle you're drawing is actually green. If you want it to be red you could set
c2.fillStyle = '#ff0000';
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.
I am drawing image which is loaded using loader method in two different places. But it only displays the second one. (I am following this http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/)
If I add an alert() it works in Fx but not in Chrome. I want it to work everywhere without alert()
If I try drawing Image without using preloaded image I am getting the desired result. But I am thinking it is extra load (http://www.html5canvastutorials.com/tutorials/html5-canvas-images/)
ImageOnload("O",120,120); //This image not displaying
alert("If i add alert it works only in Fx but not in Chrome")
ImageOnload("O",120,20);//only this is displaying ???
<html>
<head>
</head>
<script type="text/javascript" >
var ctx;
var ImageVariable={};
window.onload= function()
{
var canvas = document.getElementById("gameLoop");
ctx = canvas.getContext("2d");
ImageBuilder(ImageSourceDB);
ImageOnload("O",120,120); //This image is not displaying
//alert("If i add alert it works only in FFox but not in chrome")
ImageOnload("O",120,20);
}
var ImageSourceDB=
{
X:"./Images/X.gif",
O:"./Images/O.gif"
}
function ImageBuilder(ImageSrcDB)
{
for (iSrc in ImageSrcDB)
{
ImageVariable[iSrc]= new Image();
ImageVariable[iSrc].src = ImageSrcDB[iSrc];
}
}
function ImageOnload(ImageSrc,x,y)
{
ImageVariable[ImageSrc].onload= function ()
{
ctx.drawImage(ImageVariable[ImageSrc],x,y);
};
ImageVariable[ImageSrc].src = ImageSourceDB[ImageSrc];
}
</script>
<body>
<canvas class ="pattern" id="gameLoop" height="300" width="300" />
</body>
</html>
List item
ImageOnload("O",120,120); //This image not displaying
ImageOnload("O",120,20);//only this is displaying ???
You forgot to change the id of the object:
ImageOnload("O",120,120);
ImageOnload("X",120,20); // Use "X", not "O"!!!
If you still want to show "O" twice, then you should draw it twice, but with only one onload function. See example below:
<script type="text/javascript" >
var ctx;
var ImageVariable={};
var ImageSourceDB = {
X:"./Images/X.gif",
O:"./Images/O.gif"
}
window.onload = function() {
var canvas = document.getElementById("gameLoop");
ctx = canvas.getContext("2d");
ImageBuilder(ImageSourceDB);
ImageVariable["O"].onload = function() {
// this will be executed when the image "O" is loaded
// this is a pointer to ImageVariable["O"]
ctx.drawImage(this, 120, 120);
ctx.drawImage(this, 120, 20);
}
ImageVariable["X"].onload = function() {
// this will be executed when the image "X" is loaded
ctx.drawImage(this, 30, 30);
}
}
function ImageBuilder(ImageSrcDB) {
for (iSrc in ImageSrcDB) {
ImageVariable[iSrc]= new Image();
ImageVariable[iSrc].src = ImageSrcDB[iSrc];
}
}
</script>
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.