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.
Related
I am using ESRI basemaps with Mapbox-GL-JS. I am trying to capture a screenshot of the map using the following code:
this.map.getCanvas().toBlob(function (blob) {
canvasContext.strokeStyle = '#CCCCCC';
canvasContext.strokeRect(leftPosition, topPosition, width, height);
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
var srcURL = URL.createObjectURL(blob);
img.onload = function () {
canvasContext.drawImage(img, leftPosition, topPosition, width, height);
URL.revokeObjectURL(srcURL);
};
img.src = srcURL;
});
I am not able to figure out why the attribution on the Map is not getting captured in the screenshot. I understand that here I am just trying to get the canvas of the map. I even tried adding text elements to the map canvas and that doesn't work either. I have markers & routes, which get in the image correctly. I also tried using the Mapbox basemap and try the same, but faced the same issue.
Any help is highly appreciated!
map.getCanvas() will only return the Map's canvas not any of the HTML Elements which sit over the map like the controls, Mapbox logo or attribution text. Sam Murphy has been working on an example showing how to capture the Map including the Logo and Attribution text to an image which you can see at https://github.com/mapbox/mapbox-gl-js/pull/6518/files.
Since we can't easily capture an HTML Element to an image in JavaScript the attribution text is re-created in a canvas drawn into the Image.
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;
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").innerHTML = img;
}
Test 1 works and shows the image, but test 2 doesn't. I am not sure how to solve it but i will need the way test 2 works further along my project since i'm going to have to circle through a large amount of images.
The images are created by JFreeCharts, saved to png and then have to be posted to a site. As a side question: is it possible to push the freecharts objects straight to the jscript instead of having to save them prior (i could throw them into the dictionary and then look them up later but i'm not sure if this works)
Use .appendChild(img) instead of .innerHTML:
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").appendChild(img);
}
Demo
This is because img is an image object, not an html string, so you have to append it to the DOM.
P.S., don't forget that the alt attribute is required in the img tag!
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.
}
var img = new Image();
img.src = '/images/backdrop.jpg';
ctx.drawImage(img,0,0);
I wanted to load an image from local disk on to canvas using dialog box mechanism rather than the path directly specified as in above example. I tried different sorts using JavaScript but in vain, even tried using the input type as file. What else can I try?
Take a look here:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
It's important to have drawImage call after the image has loaded:
var img = new Image();
img.onload = function() {
var ctx = document.getElementById('ctx').getContext('2d');
ctx.drawImage(img, 0, 0);
}
img.src = 'images/backdrop.jpg';
Also, note that you probably want to use images/backdrop.jpg instead of /images/backdrop.jpg (note there's no slash in front), as using the latter would get the image from root directory, I would assume that's probably not where your images are.
As far as loading from a dialog box, you can replace the last line from the above with something like this:
var name = prompt("Enter the name of the file", "backdrop.jpg");
img.src = 'images/' + name;
This way, the user would be able to enter the name of the image file to load it. Of course, you need to have that file in your images folder.
Hope this helps.