I'm working with a modified face-to-gif - the prototype can be found here: http://bookfeels.herokuapp.com/. Basically, it's an app that uses your webcam to make a GIF.
I'm trying to simplify the UI, so I want the canvas that's recording to fade out and be replaced by the generated GIF, then fade back in again if the user wants to re-record. The two elements I'm working with are here:
facetogif.canvas = document.createElement('canvas');
facetogif.gifContainer = document.getElementById('gifs-go-here');
So, I want the facetogif.canvas to fade out, and be replaced by the facetogif.gifContainer, but I'm new to JS and I'm not sure how to search for this. Can anyone point me in the right direction? Thanks in advance!
No problem.
Here's how to change an image on the canvas:
function imgChange(imagePath) {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src=imagePath;
}
You mentioned also that you want to fade out an image as well. I'd say the easiest way to do that is with jQuery's fadeOut method.
It might seem a little intimidating, but it honestly isn't much different that from what you're already doing with document.createElement and such.
Related
I am trying to verify that this happens no matter what, and there's no way to bypass it. It seems pretty silly to me that createjs uses this architecture. But I noticed that creating a stage from an existing canvas element removes all shapes, writings, etc from the canvas? Code is below:
html:
<canvas id="canvas" width="800" height="400"></canvas>
js:
var canv = document.getElementById("canvas");
var stage = new createjs.Stage(canv);
var ctx = canv.getContext('2d');
ctx.beginPath();
ctx.arc(50,50,10,0,2*Math.PI);
ctx.stroke();
createjs.Ticker.addEventListener("tick", tick);//circle created is overwritten here!!!?! Why createjs!?
//stage.update();
createjs.MotionGuidePlugin.install();
var shape1 = new createjs.Shape();
shape1.graphics.f("#000000").dc(0,0,10);
var path1 = new createjs.Shape();
path1.graphics.beginStroke("#ff0000").mt(0,0).qt(50,100,100,0);
stage.addChild(path1, shape1);
createjs.Tween.get(shape1).to({guide:{ path:[0,0, 50,100, 100,0] }},2000, createjs.Ease.cubicInOut);
function tick(event) {
stage.update();
}
Is this something that cannot be bypassed? It seems silly to me that createjs wouldn't just actually use the existing element unerased. If not, what is the point in passing in an element in the first place, why doesn't it just create a canvas element, and give you the ID? Anyways, if this is how it's going to be, unfortunately, I am going to have to go somewhere else. Sad, because createjs seemed pretty useful.
CreateJS uses a retained graphics mode, that is, it stores the state and redraws it each time. This is because the canvas is basically a big Bitmap with drawing commands – clearing the stage is the only way to remove the previous state.
But good news! There are lots of ways to get around these limitations if you want to blend CreateJS content with other content, or even make additive drawing effects.
The first is easy, which is setting autoClear. This will prevent the clear, and just draw the new contents over the old one.
stage.autoClear = false;
The second is a bit tougher, but great for instances where you want to mix CreateJS content with other libraries or effects. You can basically use the other canvas as the source to a Bitmap you include in CreateJS:
// Create a child for CreateJS referencing the other canvas
var bmp = new createjs.Bitmap(otherCanvas);
// Add it at the bottom (or top or wherever) in your new CreateJS canvas
stage.addChildAt(bmp, 0);
This is a great approach because it lets you put your content wherever you want, edit it separately, etc.
If you have a different case this doesn't cover, let me know and I can try to make a recommendation!
Cheers.
I am very new to JavaScript. I'm trying to create a basic infinite runner game, but I'm stuck on one little issue. I need a image to print out on my HTML canvas, but when I try to nothing happens. I am creating this game with basic JavaScript. No AJAX/jQuery. Here's my code, and what I have tried.
//this is my code as of right now for printing images.
function make_base () {
base_image = new Image();
base_image.src = 'picture.png'
}
//draw the image to the canvas 2d context
cc.drawImage(base_image, 0, 0);
What this is doing, is nothing. It is not showing any sign of a image. Here's some other code I've gotten, as from w3schools (they're awesome :) )
//image source by html hidden element
var img = document.getElementById("picture");
cc.drawImage(img, 10, 10);
</script>
<image src="picture.png" id="picture" hidden></image>
This is doing the same thing that the new code is doing. Showing absolutely nothing. I'm not sure why, I've tried with Google Chrome, Firefox, and Internet Explorer. All of them with the file uploaded to my website, and with file:///c:/users/name/desktop/js/one.html. Nothing is showing up on the canvas for some strange reason. I've also told Chrome to always use JavaScript. Not only this, but how can I make it zoom in, and scroll from left to right (I can add the blocks/variables that "kill"/make the player restart)?
You probably need to wait for the image to load before trying to draw it.
const c = document.querySelector('canvas')
const cc = c.getContext('2d');
drawImage();
function drawImage() {
const image = new Image();
image.onload = function() {
cc.drawImage(image, 0, 0)
}
image.src = "//placecage.com/200/300"
}
<canvas width="500" height="500"></canvas>
Also, it's <img> not <image>. I haven't checked this, but some browsers don't allow loading things if you're on file://, you'll have to spin up a small server and serve from localhost.
Long time lurker but never made an account. Just wanted to preface that I'm by no means a dev and just tinkering and experimenting for fun, so I apologise in advance if I seem really dumb.
I'm working on a dynamic overlay for Twitch streaming and was previously using AS3 but I've switched over to HTML5 now. I'm trying to load an image onto the canvas (which will eventually be a profile picture fetched using Twitch API... but one step at a time). I'm using Adobe Animate and I have the following so far applied in Actions on the first frame of the layer:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
show_image();
function show_image() {
source_image = new Image();
source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
source_image.onload = function () {
context.drawImage(source_image, 100, 100);
}
}
When I hit Ctrl+Enter and see it in Chrome, the image appears for the first frame then disappears. I'm not sure how I'm supposed to get it to stay indefinitely. I need to be able to animate it later, and it'll change depending on the latest follow/donation/sub, etc.
I tried extending the frame itself in the timeline, however, this just changed long how it took to loop and didn't make the image itself stay longer. I'm probably missing something really simple!
Any help would be appreciated. Thanks!
Your code is okay if your approach is using a canvas with HTML and JS, without any libraries involved. However, this is not the case, as you are using Animate, and the way to draw graphics with it is different than using default canvas methods like drawImage().
Animate includes the CreateJS suite, which includes the EaselJS library ,and this allows you to use another tools to draw to your canvas. Two or them are the Stage object, the visual container of your animate project, and the Bitmap object, who represents an image, canvas or video. For effects of this question, only both objects are required.
Note that the code below is only for the first frame:
/* It is not necessary to declare the canvas or stage element,
as both are already declared. At this point the stage is ready to be drawn */
show_image();
function show_image() {
var source_image = new Image();
source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
source_image.onload = function(event) {
/* A new Bitmap object is created using your image element */
var bmp = new createjs.Bitmap(event.currentTarget);
/* The Bitmap is added to the stage */
stage.addChild(bmp);
}
}
I'm trying to make a custom avatar maker, where my users can drag & drop images to the position they want (clothes etc. I take the image urls from database based on what they own). Then they can save the look as png image to my site (using php). I have no experience on javascript/jquery but I don't think that this can be without them. So I've found amazing code for this from here:
http://www.fabiobiondi.com/blog/2012/10/export-and-save-a-screenshot-of-an-html5-canvas-using-php-jquery-and-easeljs/
But the images are already in the canvas and can't go outside of it, which is bad considering that someone could have 100 pieces of clothing and didn't want to display them all. Also I have to make custom code for each piece, which is also bad because not all users have the same images to drag.
Is there a way to put all images draggable (to the canvas), so I could easily add the image urls from my database as basic html/css? Is it possible that the images would be outside of the canvas first? Or should I create another canvas for the items users don't want?
the script in the article uses a static image because its goal is only explain how to export a canvas to bitmap : )
I have written another small article where I describe how to upload N images from your hard drive into a canvas ( using CreateJS ) so as you can see the process to load dynamic sources is not so hard.
http://www.fabiobiondi.com/blog/2012/10/upload-images-from-the-user-hard-driveto-an-html5-canvas-easel-js-application/
Anyway, if you need to load an image into a canvas you can simply use a syntax like this:
var img = new createjs.Bitmap('http://uri/image.jpg')
img.x = 50;
img.y = 50;
stage.addChild(img)
stage.update();
and if you need to know when an image is completely loaded you should listen for the onload event:
var image = new Image();
image.onload = onImageLoaded;
image.src = "http://uri/image.jpg";
function onImageLoaded (event) {
var img = new createjs.Bitmap(event.target)
img.x = 50;
img.y = 50;
stage.addChild(img)
stage.update();
}
hope it's useful
Is it possible to use imagename.readyState in canvas?
If not does anyone know a way of detecting when an image being drawn to the canvas using "drawImage" has loaded and is ready to display?
I am creating an image showcase using the canvas - when an image is selected I want to have a loading animation (which I have already created) display until the loaded condition is met.
I am still learning to use javascript and have been trying all day to no avail - so apologies for the lack of example code to display and illustrate what I'm asking!
You might try loading the image by using new Image() and setting the .onload event to draw the image on the canvas after the image has been loaded.
var img = new Image();
img.onload = function() {
// code to draw image on the canvas...
}
img.src = "/path/to/img.jpg";
See also: https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html