How to debug canvas?
It's loading bunch of rotating images in canvas. I want to check what images they are. But firebug shows nothing but the canvas tag.
Is there any way to find out what these canvas pre-loaded images are so I can download them?
You can check the new Firebug feature of 3D view of the page (canvas, div, ...).
You can place debugger; in your javascript code, so the debugger will automatically stop there.
Images drawn to canvas elements are loaded by javascript e.g.
var img = new Image();
image.onload = function(){ draw on canvas };
img.src = "image url";
You could try searching the JS source for .jpg or .png references, etc.
Related
I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
I have html page and I use a generic handler to get a byte array for my img control.
I have recently moved to using the canvas element.
I have got an image loaded into my canvas after I have loaded it into a hidden img variable.
I want to refresh/change this image as quickly as I can.
I have read that canvas takes advantage of hardware accelerated graphics.
is this handled automatically by the canvas element? Do i need to add any additional code?
Do I need specific graphics card or is it down to the graphics driver installed?
This is my code so far:
I call a generic handler ashx page that returns
context.Response.BinaryWrite(data);
This loads an image into an Image variable
var myIMG= new Image();
And when it has hit the onload event of that image variable it draws onto the canvas:
var c1 = document.getElementById("live1x4");
var ctx1 = c1.getContext("2d");
c1.setAttribute('width', '360');
c1.setAttribute('height', '288');
img1x4.onload = function () {
ctx1.drawImage(img1x4, 0, 0);
};
img1x4.onerror = function () {
$("#divMode5").html('error#1');
};
Html5 Canvas automatically uses any existing GPU to accelerate graphics when it can.
Just be sure you have the latest browser installed (some old browsers don't use the GPU).
If you're just drawing an offscreen img element to the canvas, that's GPU accelerated.
context.drawImage(myImageElement,0,0);
I see that you're using a byte array for something. Therefore I should mention that .getImageData and .putImageData don't use the GPU for acceleration.
I'm having trouble using easelJS to render Bitmap in IE9. Every other browser renders the image fine, but IE9 canvas is blank. I even tried preload the image in a hidden div and it still doesn't work. here's my code, help please!
function init(){
var canvas = document.getElementById('myCanvas');
var stage = new createjs.Stage(canvas);
var ship= new createjs.Bitmap(ship.png);
stage.addChild(ship);
}
You need to call stage.update() after adding the child. Also, you'll need to wait until the image is fully loaded. Check out PreloadJS, by the makers of EaselJS to help you handle this.
I have used this code (kind of tutorial) at http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5 ... In this code, I used the "Image Scale / Resize" code and I found something that I cannot explain. I mean, instead of using :
final Image img = new Image("/img/test.jpg");
I have used the client bundle and so the following code:
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1());
And I do not have any error, but the image did not appears. Finally I found the solution with :
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1().getSafeUri());
Do you know the reason why ".getSafeUri()" solves the problem ?
See ImageResource in ClientBundle as real <img> element
An Image created with an ImageResource will unconditionally use a clipped image, where the image is set as a CSS background image (and the <img>'s src is a 1×1px transparent GIF). Because the image actually is a blank GIF, painting it to the canvas does nothing noticeable; canvas does not take CSS styles into account.
Using getSafeUri() you'll have the data: URL of the image, which will be used as the src of the <img>. No blank.gif here, so the image is correctly painted on the canvas.
Note however that getSafeUri() won't work in IE6 and IE7 by default. If you need to support them, you'll have to annotate your ImageResources with either #ImageOptions(preventInlining = true) or #ImageOptions(repeatStyle = RepeatStyle.Both). Alternately, you could use DataResources instead of ImageResources.
I'm trying to get the data from a canvas and set the src attribute of a img element. The problem here is that, the canvas has a background image setted with css, not with canvas methods. Is there any way or method to extract the background image so the toDataURL method could catch it?
Thanks
I guess there is a solid reason why you are not drawing the background image to the canvas itself so I can offer you this solution:
Draw the background-image to a second canvas element positioned below the first canvas.
When you want to take the canvas data and use it create a third canvas (no need to attach it to the DOM or make it visible.
Draw the background canvas onto it and then draw the main canvas on top.
Take the data from the third canvas.
Voila.