Develop Reference

How to display a JPG image from a Node.js buffer (UInt8Array)

I have a custom Node.JS addon that transfers a jpg capture to my application which is working great - if I write the buffer contents to disk, it's a proper jpg image, as expected.
var wstream = fs.createWriteStream(filename);
wstream.write(getImageResult.imagebuffer);
wstream.end();
I'm struggling to display that image as an img.src rather than saving it to disk, something like
var image = document.createElement('img');
var b64encoded = btoa(String.fromCharCode.apply(null, getImageResult.imagebuffer));
image.src = 'data:image/jpeg;base64,' + b64encoded;
The data in b64encoded after the conversion IS correct, as I tried it on http://codebeautify.org/base64-to-image-converter and the correct image does show up. I must be missing something stupid. Any help would be amazing!
Thanks for the help!

Is that what you want?
// Buffer for the jpg data
var buf = getImageResult.imagebuffer;
// Create an HTML img tag
var imageElem = document.createElement('img');
// Just use the toString() method from your buffer instance
// to get date as base64 type
imageElem.src = 'data:image/jpeg;base64,' + buf.toString('base64');

facepalm...There was an extra leading space in the text...
var getImageResult = addon.getlatestimage();
var b64encoded = btoa(String.fromCharCode.apply(null, getImageResult.imagebuffer));
var datajpg = "data:image/jpg;base64," + b64encoded;
document.getElementById("myimage").src = datajpg;
Works perfectly.

You need to add img to the DOM.
Also if you are generating the buffer in the main process you need to pass it on the the render process of electron.

Use svg objects instead of raste image object in canvas

I am trying to create an application like this using JavaScript and canvas.
I have created a draft using kineticjs as the canvas library. The teeth are all png images and the lines are drawn by kinetic js using the Line object.
A friend of mine suggested I draw everything as one large svg (teeth and lines) where each tooth and line is another distinguished path load it on canvas with distinguished id's and manipulate them using the id's.
I tried reading the kineticjs docs and fabricjs object but didn't find something like that. I mean having the svg stored and loading it on canvas using fabricjs or kineticjs. Then the library should parse it and create the svg on canvas which I can manipulate them by id's.
Is it even possible? I am very new to this svg graphics. Is it even possible the way I am thinking it?
I am currently loading Teeth as Images using KineticJS
Periodontogram.prototype.initializeImageObjects = function (){
var obj = this;
if (this.DEBUG){
console.log("initializing ImageObjects:")
}
var check = function (item){return item !== undefined;}
var url = this.options.url;
var imageObj;
var image;
this.options.imageFilenames.forEach(function (filename, index){
if (obj.DEBUG){
console.log("Loading "+filename+" image");
}
var src = url+'/'+filename;
imageObj = new Image();
imageObj.src = src;
imageObj.onload = function (){
if (obj.DEBUG){
console.log("Image "+src+" successfully loaded");
}
image = new Kinetic.Image({
x:0,
y:0,
id: filename.split('.')[0],
width: this.width,
height: this.height,
image:this
});
obj.imageObjects[index] = this;
obj.teethImages[index] = image;
if (obj.imageObjects.filter(check).length === obj.options.imageFilenames.length ) {
if (obj.DEBUG){
console.log("All Images loaded successfully");
console.log("ready to call rest methods")
}
obj.positionImages();
obj.createLineGroups();
obj.createLabelGroups()
obj.createStage();
obj.drawOnScreen();
$("#"+obj.container).width(obj.stage.getWidth());
$("#"+obj.container).height(obj.stage.getHeight ());
obj.callback();
$.event.trigger({
type:'finishLoading',
obj: obj
});
}
};
});
}
I want all this be replaced by loading a whole svg, that consist of teeth and lines.

FabricJS will convert, decompose & recompose an existing single SVG URL/string into a Fabric.PathGroup. Then you can use mySvgGroup.getObjects() to fetch the individual tooth paths which you can manipulate as desired.
http://fabricjs.com/fabric-intro-part-3/#deserialization
KineticJS will accept an individual SVG tooth's path data and display it on canvas.
http://kineticjs.com/docs/Kinetic.Path.html
Still, it's probably more flexible to create individual SVG paths for each tooth and feed those individual SVGs into either KineticJS or FabricJS.
Then you can manipulate them by id's as you desire:
Place each individual tooth using [x,y] coordinates,
Resize without pixelization,
Put each tooth in a Group and make annotations/drawings onto the tooth,

Printing the contents of a div using a canvas

I am trying to generate an image out of the contents of a div. Unfortunately it is not working for me. The reason why I want to do that is because I want to send the generated image to a printer as a base64 string.
Anyway, below is my code:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='300' height='250'>" +
"<foreignObject width='100%' height='100%'>" +
document.getElementById('receipt_wrapper').innerHTML +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
img.onload = function () { ctx.drawImage(img, 0, 0); };
var dataURL = canvas.toDataURL("image/png");
var imgBase64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
if (window.Android != undefined) {
Android.print(image);
}
Nothing is showing up in the canvas. What is wrong with my code?
P.S: I'm running this code inside an Android device.

That method no longer works on modern browsers.
Using svg's foreignObject to capture webpage content is no longer allowed because of cross-domain security implemented by modern browsers.
If your receipt is simple html and does not include cross domain images you might take a look at html2canvas for content capturing on the client-side:
http://html2canvas.hertzen.com/
Alternatively, you could also use a "headless browser" like phantomJS if you want to capture webpage content on the server:
http://phantomjs.org/

Why do my canvases only load on refresh?

I have a web page which contains an iframe, the iframe contains a table which contains up to 1,000 canvas elements. The canvas elements are filled by a function defined in the iframe, which is called by the parent page. The function iterates and fills each canvas with a base64 data URI contained in a hidden span in the parent page. I have read a few other Stackoverflow posts regarding similar issues but I have already tried the most commonly used suggestion (using onload) and that does not seem to work. I am fairly fresh to html/javascript so I doubt I am doing things the best way. I was hoping someone could guide me on how to assure that all the canvas elements are successfully filled with the base64 data on the first load so I don't need to refresh multiple times to get me thumbnails? Here is some code, it is VERY trimmed up code from my html page. If I were to paste the entire page, it might be a bit too much too handle sensibly. Here is what I believe to be the essential actors.
My onload call to my function which fills the canvases, this is on the main page which contains the iframe -
<body onload="document.getElementById('framePage').contentWindow.fillCans();">
Here is the fillCans() function which is contained within the framePage iframe (I probably should move this to the main html page, but so far this is how the script has... evolved haha). pgCnt element contains the "counter" numbers if you will. It will defines how many elements to iterate through. When var c is assigned, the "can"+i elements are the canvases. When var imgSrc is assigned, the "span"+i elements are the hidden span elements on the parent page which contain the base 64 data URIs -
function fillCans() {
var cnt = document.getElementById("pgCnt").innerHTML;
var cnt = cnt.split("-");
var cnt1 = cnt[0];
var cnt2 = cnt[1];
for (var i=cnt1; i <= cnt2; i++) {
var targ = "span"+i
var c = document.getElementById("can"+i);
var ctx = c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,128,128);
var image = new Image();
var imgSrc = parent.document.getElementById("span"+i).innerHTML;
imgSrc = imgSrc.split("*");
image.src = imgSrc[0];
ctx.drawImage(image,0,0);
}
Like I said, this will load fine, firebug reports no errors, however all the canvases are white with no thumbnails. When I hit refresh a few times they all finally load. I've read that the image data is asynchronously loaded but I am not certain to as what that means, I assume it means it doesn't play by the rules that onload plays by? Anyways as usual, thanks for all the help stackoverflow community. It will be great to know how to get these thumbnails to load successfully on the first page load.
After #Sebastian's great suggestions I was able to get my JavaScript functioning as it should. I am pasting in the new function. As it works now, in case anyone ever comes across a similar issue. I had to implement an onload call to a function which drew the image, and then utilize in IIFE for loop to insure that each thumbnail was drawn with correctly iterated data.
function fillCans() {
var cnt = document.getElementById("pgCnt").innerHTML;
var cnt = cnt.split("-");
var cnt1 = cnt[0];
var cnt2 = cnt[1];
for (var i=cnt1; i <= cnt2; i++) {
(function(iterable){
var c = document.getElementById("can"+iterable);
var ctx = c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,128,128);
var image = new Image();
var imgSrc = parent.document.getElementById("span"+iterable).innerHTML;
imgSrc = imgSrc.split("*");
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = imgSrc[0];
})(i);
}
}

You are right, the problem is that the image has to be loaded first, before you can draw it.
In your case image is not loaded at the time you call
ctx.drawImage(image,0,0);
However later on the browser has cached the image URL and in between the calls to the assignment of the source property and the drawImage call the browser has already retrieved the image from the cache.
To make it work in any case, you need to wait for the image to load:
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = imgSrc[0];
Be sure to first register the callback and then set the src.
See HTML Canvas DrawImage Tutorial

Get size of SVG graphics by javascript

To add a svg graphics in html page, it is common to use object tag to wrap it like this:
<object id="svgid" data="mysvg.svg" type="image/svg+xml"
wmode="transparent" width="100" height="100">
this browser is not able to show SVG: <a linkindex="3"
href="http://getfirefox.com">http://getfirefox.com</a>
is free and does it!
If you use Internet Explorer, you can also get a plugin:
<a linkindex="4" href="http://www.adobe.com/svg/viewer/install/main.html">
http://www.adobe.com/svg/viewer/install/main.html</a>
</object>
If you do not use width and height attributes in the object tag, the svg will be displayed in full size. Normally I get svg files from Open Graphics Library for testing. Is there any way to get svg's size by using JavaScript? Or maybe I should just look at the svg xml file to find out the size from the top svg tag?

See http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2
It is possible to get access to the SVG DOM referenced by an HTML:object as long as the SVG file is on the same domain (otherwise this would be a security vulnerability. If your object tag has id="myobj" you would do:
var obj = document.getElementById("myobj"); // reference to the object tag
var svgdoc = obj.contentDocument; // reference to the SVG document
var svgelem = svgdoc.documentElement; // reference to the SVG element
Then you can get access to the svg element's width/height by:
svgelem.getAttribute("width")
svgelem.getAttribute("height")
Note that these attributes may be things like "100px", "300", "200em", "40mm", "100%" so you need to carefully parse it.

> Is there any way to get svg's size by using JavaScript?
No and yes.
No:
JavaScript won't be able to access the SVG file contents that are sitting in the browser.
So it wouldn't be possible to have a page containing an arbitrary SVG image and then have JavaScript determine anything from the SVG file itself.
The only data JS can access it that contained within the page's DOM: the original markup plus any JS-related modifications to the DOM. You could access the object element's attributes and descendant nodes, but that won't give you visibility of anything more than what you can see if you look at the page markup yourself.
Yes:
JS (in modern browsers) can parse any XML string into a DOM and then access the content using DOM-based methods.
You could get the SVG file contents by issuing an xmlHttpRequest-style request (i.e. JS performs an HTTP GET on the SVG file's URL). JS would then have the SVG file's full XML string and you can then access anything you like.
> Or maybe I should just look at the svg xml file to find out the size from the top svg tag?
This would be more feasible by far.
The only JS-based solution would require JS to perform a GET request on the SVG file's URL (as above), which is unlikely to be feasible - each page load might result in double-downloading each SVG file, and the parsing of the SVG's XML into a DOM by JS might be too resource intensive.
Having JS retrieve the SVG's XML content and parse it into a DOM to retrieve only the image dimensions is a bit overkill. It's perfectly possible, but generally not practical.
Querying the SVG's XML content server-side, determining a suitable width and height and then dynamically adding the width and height attributes prior to returning markup to the browser would be your best bet.

ES6: Using async/await you can do this in sequence-like way
async function getImage(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
and use above function
let img = await getImage("yourimage.svg");
let w = img.width;
let h = img.height;
You can use it as long as the SVG file is on the same domain (details here). Working example
async function getImage(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
async function start() {
// here is example url with embeded svg but you can use any url
let svgURL = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='120' width='220'%3E%3Cellipse cx='110' cy='60' rx='100' ry='50' stroke='black' stroke-width='3' fill='red' /%3E%3C/svg%3E";
let img = await getImage(svgURL);
let w = img.width;
let h = img.height;
// print
console.log({w,h});
pic.src = svgURL;
}
start();
<img id="pic">

Is there any way to get svg's size by
using JavaScript?
YES
var filesize = function(url, requestHandler) {
var requestObj = new XMLHttpRequest();
requestObj.open('head', address, true);
requestObj.onreadystatechange = callback;
requestObj.send(null);
};
Now a handling function:
var requestHandler = function(result) {
if (this.readyState === 1) {
this.abort();
}
return this.getResponseHeader("Content-length");
};
var size = fileSize("http://whatever.org/someSVGFile.svg", requestHandler);
alert(size);
That should return the filesize of your svg or any other file without a hitch. Server configuration is the only thing that might interfere.