For HTML5 Image object, is there a way to know if it contains a drawable bitmap?
For example I use the following code:
var img = new Image();
Clearly the Image is not drawable at this point because no src is binded to it. Now if you call:
img.src = "www.blabla.."
Before the image is loaded, the Image is also not drawable, so my question is if there is a way to know if a Image object is drawable? BTW, without using onload function.
I am not sure if this question is clear. Thank you very much.
You could test img.src
if(img.src){
//drawable
}
You can also query the complete property of the image
http://www.w3schools.com/jsref/prop_img_complete.asp
Related
I want to mask the png image pattern.png with another image - mask.png, but it doesn't work at all and I can't find the reason. Instead of masking the image, the mask just disappears and the pattern stays the same as it was.
I tried making a MovieClip, drawing e.g. a circle and using that as the mask instead of mask.png and it works just fine. Is it because you can't use loader objects as masks? How do I make it work?
edit: After changing the size of mask.png to be smaller than the pattern, I've realized that it actually does kind of work, but what happens is instead of cutting the pattern into the shape I've drawn in the png file it just cuts it into the shape of the entire file, as in, it counts the rectangular transparent background as well. How can I make it cut out just the shape?
var mask:Loader = new Loader();
mask.load(new URLRequest("mask.png"));
var pattern:Loader = new Loader();
pattern.load(new URLRequest("pattern.png"));
pattern.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
function loadComplete(e:Event):void {
addChild(pattern);
addChild(mask);
pattern.mask = mask;
}
Your code is looks correctly. The mask property of DisplayObject wants DisplayObject too. But try to make few things, to find the trouble:
You have only one listener, to pattern.png. But you must be sure, that mask.png has loaded already too.
Despite that Loader is DisplayObject too - try to get content from loader for mask, and just after that try to use it.
*Ah, and one more thing. You must at first add listener, and only later try to load.
I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}
I'm trying to use some features from the pixastic libary and combine it with kineticjs. One of which is to apply the sepia effect in pixastic to an image created with kineticjs.
I have a jsfiddle setup here:
http://jsfiddle.net/SkVJu/28/
I thought the following would work:
function sepia() {
Pixastic.process(darth, "sepia");
layer.draw();
}
but the image just stays the same. Have i missed something or is this not even possible to combine the both libraries together?
My guess is that you can't apply a Pixastic function directly onto a Kinetic.Image object, as it is slightly different than a regular image object.
Alternatively, you need to grab the original source of the image, then you can run the Pixastic effects on that image, and then set the Kinetic.Image object with the new affected image after.
function sepia() {
var sepia = Pixastic.process(darth.attrs.image, "sepia");
darth.setImage(sepia);
layer.draw();
}
Here's the full code: jsfiddle
Note: You'll have to run this on your local server, as it won't work on jsfiddle (the pixastic library can't be loaded as an external resource, without a CDN host)
2nd Note: You had to declare var layer outside of the imageObj.onload function, or else your sepia() function could not access the layer from inside the imageObj.onload. You can see how I did it in the jsfiddle.
I want to play animated GIF file inside a HTML Canvas. I have used the code below but it is not working.
What is wrong with the code?
var drawingCanvas = document.getElementById('myDrawingCanvas');
if(drawingCanvas.getContext)
{
var context = drawingCanvas.getContext('2d');
var imgObj = new Image();
imgObj.onload = function ()
{
context.drawImage(imgObj, 0, 0, 1024, 600);
}
imgObj.src='HTML Images/Spell Bee/images/mainscreen.gif';
}
You cannot as canvas doesn't provide any methods to deal with animated gifs. You should split gif into single frames then create a spritesheet and animate it copying current frame.
You can actually decode the GIF with JavaScript and write the frames to canvas. Check http://slbkbs.org/jsgif/
I found an article that answers your question. Basically, when you add an animated gif to a canvas element it displays the exact state the image is at when it's included. So, as rezoner says, you need to create a spritesheet and animate it using javascript.
I'm having my first experience in developing html5 applications. My issue is to make room plan. In the top of the page I have elements to drag to the bottom map area (they are copied). In the map area I can move elements, but not copy.
I've built drag'n'drop with help of image elements. But now I want to use canvas for updating numbers on images. I want to use canvas text functions for updating images.
The problem is when I copy canvas element from the top, html inserts well, but it is not drawn in some reasons.
Please, watch code here http://jsfiddle.net/InsideZ/MuGnv/2/. Code was written for Google Chrome.
EDIT:
I made a few small tweaks here: http://jsfiddle.net/MuGnv/5/
Note the changes made to the drawImg function:
function drawImg(src, targetClass) {
$(targetClass).each(function() {
var ctx = $(this).get(0).getContext('2d');
var img = new Image();
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
});
}
Anytime a drop event is handled, the images are drawn again. This was the missing component as the image was only being drawn once.