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(...);
Related
How can I get a list of the available contexts on a given canvas? Unfortunately, using getContext on every possible option would not work since https://stackoverflow.com/a/13406681/2054629
So
var possibleContexts = ['2d', 'webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2', ...];
var availableContexts = possibleContexts.filter(function(c) { return canvas.getContext(c); });
won't work
I'm trying to get a better understanding while at some point in my code webgl context is available and sometime not. I have users for who a newly created canvas will have a webgl context and the one I'm interested in fails. I'm trying to better understand that. So solutions that would create new canvas won't work here...
At the moment I'm doing things like:
var testWebGl = function() {
var canvas = document.createElement('canvas');
return !!(canvas.getContext('webgl') || canvas.getContext('canvas.getContext('webgl')');
};
and then
if (testWebGl())
doSomeWebGlStuff(myCanvas);
And occasionally doSomeWebGlStuff will fails because I can't get a webgl context on myCanvas. So I'd like to get all the available contexts on the exact canvas I'm interested in.
The code won't work since you use the same canvas object for getContext() in all cases. The tests must be performed on different elements than the one you intend to actually use, which means you have to create a new canvas element instance before each getContext() as #tommie showed in his now deleted answer (running the snippet was evidence of that).
For reference, this is what tommie had in his answer with minor modifications/comments:
var possibleContexts = ['bitmaprenderer', '2d', 'webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2'];
var availableContexts = possibleContexts.filter(function(c) {
var canvas = document.createElement("canvas"); // new canvas element for test only
if (canvas.getContext(c)) {return c}
});
You can alternatively check for the existence of context objects directly:
var availableContexts = [];
if (typeof CanvasRenderingContext2D !== "undefined")
availableContexts.push("2d");
// prefer webgl over experimental-webgl
var hasWebGL = !!document.createElement("canvas").getContext("webgl");
if (typeof WebGLRenderingContext !== "undefined")
availableContexts.push(hasWebGL ? "webgl" : "experimental-webgl");
...etc.
Adjust as needed.
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
I would like to two show a Chart and also present an url with a link to a bigger Chart. The small preview-image looks and works fine:
<canvas id="image"></canvas>
var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
The canvas is wrapped in a div, that's why offsetWidth and offsetHeight (to fill this additional div-element). Cause of the responsive-design there is no fixed image. Anyway, this works perfectly. For the URL to the "bigger" image I want to have the URL. I know the toDataURL() will help.
var url = document.getElementById("image").toDataURL();
document.write(url);
There are two disturbing problems with it:
The URL with this way exisists and, but the image has no content.
I also want to give the canvas-image a new size, like I managed with ct1.canvas.width and ct1.canvas.height, but it seems I cannot add this to the toDataURL.
What's wrong with the code?
Okay, I think I got it. Chart.js is animating the charts, so the toDataURL() I mentioned in my first question rendered only an empty image. We have to initiate the toDataURL, not before the animation is done. We handle that with the options:
var options = {
onAnimationComplete: done
}
and a tiny function:
function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}
I think that's all.
I have a canvas on one page that is built using fabricjs
can i send that canvas to another page so that it retains all its objects as it is with all their properties and attributes to be same aswell.
Sure you can, just export your canvas to JSON
var canvas = new fabric.Canvas('c');
data = JSON.stringify(canvas)
Now you can send that data using a post request or store it in a database or whatever you want.
canvas.loadFromJSON(data, canvas.renderAll.bind(canvas));
Example: http://jsfiddle.net/P9cEf/3/
The example uses two canvases one page, but the concept is the same.
Edit:
To download the image client side
var canvas1 = document.getElementById("c");
var image = canvas1.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image;
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.
}