I'm trying to preload the images and then put them into bitmaps. This is on a server and the src is correct. Not sure what's going on exactly? I'm new to preloadjs. I can't seem to retrieve the image to use it. They're from the same exact source yet one works and the other doesn't, and I can write to the canvas and it works just fine?
function handleComplete(){
var ret = new createjs.Text("hi!", "24px sans-serif");
ret.x = 5;
ret.y = 5;
stage.addChild(ret);
var image = preload.getResult("imgC");
var pic = new createjs.Bitmap(image); //this doesn't?
stage.addChild(pic);
stage.update();
$('img').attr("src", "extra/DNA/c.png");//this works
$('img').attr("src", image); //doesn't work
}
preload.on("complete", handleComplete(), this);
preload.loadFile({id:"imgC", src:"extra/DNA/c.png"});
I noticed I am getting a few errors from Chrome:
failed to load resource: net::ERR_BLOCKED_BY_CLIENT
Uncaught typeError: Cannot read property 'handleEvent' of undefined
and firefox:
typeError: b is undefined (reference to preloadjs line 12)
Its possible the content can't be loaded by XHR (xmlhttprequests), which preloadJS uses by default for images. Try initializing the queue with useXHR=false. If you load the image using the path in an EaselJS bitmap, it just does an image tag request, which isn't affected by cross-domain issues.
var queue = new createjs.LoadQueue(false);
// other load code here
Related
Hi i got a project where i get posts from server with ajax post, them i detect images in appended posts and resize them based on their ratio using a function.
The problem is when i append new post's and try to fire the function, it detects the images as size (height and width) 0, cause the image ain`t loaded yet. I searched, but i won't found any answer, there is a way to detect if all images in ajax response (where it contains, other elements) have been loaded using .onload or another alternative?
**Update**
I figure it out:
Checking for img elements length inside ajax response:
$("#yourelement").append(html);
var $dialog = $(html);
imglength = $dialog.find("img").length;
Add a count++ on every img loaded, and check if its equal to img length:
n_images = 0;
$("#yourelement img").on('load', function(){ // check for every new image loaded in #
n_images++;
if (n_images == imglength) {
//alert(imglength); // I used to verify if it works
yourfunction(); // will fire when all new images have been appended and loaded
}
});
I am working on adding the contents of an iFrame to the canvas in order to save it as an image. I get the 'canvas.drawWindow is not a function' error in FF.
I understand that this only works with Chrome privileges - How do I enable chrome privileges or how should I avoid the error.
Thanks!
drawWindow() is a method belonging to CanvasRenderingContext2D, not HTMLCanvasElement (canvas) itself. Per the docs, "To get [the context] object, call getContext() on a canvas, supplying "2d" as the argument"
example:
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.drawWindow(...);
i want to load image from remote url and synchronicity and change it width and height.
i am using the folowwing code, but it want let me change the width and highet, i think i needto convert the loader to a Bitmap object.
how can i do that, thank you very much.
var imageURLRequest:URLRequest = new URLRequest(pic);
var myImageLoader:Loader = new Loader();
myImageLoader.load(imageURLRequest);
var urlRequest:URLRequest = new URLRequest(pic);
var loader:Loader = new Loader();
loader.load(urlRequest);
trace(loader.width); // return 0
loader.width =100; //dosent work
allMC[i].img.addChild(loader);
To access what the loader loaded, use loader.content reference. If you are loading an image, you can retrieve its raw data via (loader.content as Bitmap).bitmapData, of course first check if it's so via if (loader.content is Bitmap). Also, you need to do all of this after your loader will finish loading, it'll send an event indicating this.
...
loader.load(urlRequest);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
...
private function loaderComplete(e:Event):void {
// now your image is fully loaded
trace(loader.content.width);
// etc etc, whatever you need to do with your image prior to
// addressing it from elsewhere.
}
I got this web service that gives me a (jpeg) image. What I want is take this image, convert it into a Data URI and display it on an HTML5 canvas, like that:
obj = {};
obj.xmlDoc = new window.XMLHttpRequest();
obj.xmlDoc.open("GET", "/cgi-bin/mjpegcgi.cgi?x=1",false, "admin", "admin");
obj.xmlDoc.send("");
obj.oCanvas = document.getElementById("canvas-processor");
obj.canvasProcessorContext = obj.oCanvas.getContext("2d");
obj.base64Img = window.btoa(unescape(encodeURIComponent( obj.xmlDoc.responseText )));
obj.img = new Image();
obj.src = 'data:image/jpeg;base64,' + obj.base64Img;
obj.img.src = obj.src
obj.canvasProcessorContext.drawImage(obj.img,0,0);
Unfortunately, this piece of code doesn't work; the image is not painted on the canvas at all (plus it seems to have width and height = 0, could it be not decoded correctly? I get no exceptions). img.src looks like data:image/jpeg;base64,77+977+977+977+9ABBKRklG....
Resolved: turns out I should have overridden the mime type with:
req.overrideMimeType('text/plain; charset=x-user-defined');
and set the response type with:
req.responseType = 'arraybuffer';
(see this. You should make an asynchronous request if you change the response type, too).
First you need to create an img element (which is hidden)
Then you do exactly what you have done except that you listen to your onload event on your img element.
When this event is launched you are able to get the width and height of your pictures so you can set your canvas to the same size.
The you can draw your image as you did in last line.
With firebugs net tab open i stated zooming in and out of google map and i found its making requests for the png images.
Ok with this i understood that we can request the images using the Ajax. but wait ? i always used to request html, jsox, txt and xml. Image ........ its strange for me ? Can some one please elaborate on this ?
Also i would like to know if text is downloaded we add it to some DOM element and it show up. How images retried from the ajax can be accessed ?
Any help or pointer will be great help :)
GMaps doesn't make XMLHttpRequests to get the images. They instead use a normal <img /> element that is injected via javascript.
They then use the "onload" and "onerror" events to detect if the image was loaded correctly.
They retry a download of the image if it times out. This is achieved by setting a timer and once it expires re-setting the src property of the image.
var tile = document.createElement('img');
var url = 'http://sometilehost/X.Y.Z.png';
var downloadTimeout = 10000; // Retry in 10 seconds
// Tile downloaded successfully
tile.onload = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile downloaded');
};
// The tile couldn't be downloaded. 404, 503 ...
tile.onerror = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile not downloaded');
};
// This will fire if the tile doesn't download in time
tile.downloadTimer = window.setTimeout(function () {
tile.src = url; // Start the download again
}, downloadTimeout);
tile.src = url;