Combine several imageData structures into one canvas - javascript

I'm using Konvajs framework to work with canvas. I need to create three shapes (slots) and make some manipulations. It works but also I need to work with pixels, I get image via getImageData, store it in internal structure then use for manipulation.
var c = this.layer.getCanvas();
var ctx = c.getContext();
this.slots[name].data = ctx.getImageData(0, 0, this.stage.getWidth(), this.stage.getHeight());
when the job is done, I want to combine those imageData structures into one but I can't. Using this answer I try to do it, but always get:
konva.min.js:29 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
This is my snippet of code:
var c = layer.getCanvas();
var ctx = c.getContext();
for (var slot_name in this.slots) {
console.log('Slot', slot_name);
var slot_data = this.slots[slot_name].data;
var c2 = layer.getCanvas();
var ctx2 = c2.getContext();
ctx2.putImageData(slot_data, 0, 0);
ctx.drawImage(c2, 0, 0);
}
var imageData3 = c.toDataURL({pixelRatio: 1});
zip.file('scene.png', imageData3.substr(imageData3.indexOf(',') + 1), {base64: true});
Where is my mistake?
UPDATE:
changed line:
ctx.drawImage(c2, 0, 0);
to:
ctx.drawImage(c2._canvas, 0, 0);
and canvas saves but I see only the last saved picture. Why?

var c2 = layer.getCanvas(); - canvas here is not native canvas, it is Konva wrapper. So you have an error why you are trying to draw it.
To get reference to native canvas you can use: var c2 = layer.getCanvas()._canvas;.

Related

aframe:How to get pixels from canvas

I want to read and process the pixel data rendered in a-frame.
I tried the code below
var canvas = document.querySelector('canvas'),
params = {
preserveDrawingBuffer: true,
},
gl = canvas.getContext('experimental-webgl', params);
var pixels = new Uint8Array(canvas.width * canvas.height * 4);
gl.readPixels(
0,
0,
canvas.width,
canvas.height,
WebGLRenderingContext.RGBA,
WebGLRenderingContext.UNSIGNED_BYTE,
pixels
);
But the pixels array was left of 0, 0, 0, 0
How can I read the pixel data on the canvas?
I'd appreciate it if you could answer this problem
In the demo you posted, find and put a breakpoint on the line that says:
_gl = _context || _canvas.getContext( 'webgl', attributes )
Take a look at attributes, it's an options object, and among other settings it contains this option:
preserveDrawingBuffer: false
Although your original post shows you manually setting this option to true, your option has not carried through into the demo you posted. If you can make this option take effect, you should be able to read the pixels back.

How to connect objects with Bezier-like curves using Paper.js

I have a web app prototype where nodes similar to Blender shader editor are connected to each other. I am using Paper.js framework
I want them to be connected using those smooth Bezier-like curves. So I have 2 shapes and I can connect them by making a straight line, but now I want to have handles at the endpoints that smooth these objects out, kinda like this:
So 2 handles on endpoints, pointing horizontally for half the bounding box of the path.
The problem is I can't figure out how to add and edit those handles using Paper.js
The code I have is this:
function makeRectangle(topLeft, size, cornerSize, colour){
var rectangle = new Rectangle(topLeft, size);
var cornerSize = cornerSize;
var path = new Path.RoundRectangle(rectangle, cornerSize);
path.fillColor = colour;
return path;
}
var xy1 = new Point(50,50); //Position of 1st rectangle.
var size = new Size(100, 80); //Size
var c = new Size(8,8); //Corner radius
var col = "#167ee5"; //Colour
var r1 = makeRectangle(xy1, size, c, col); //Make first rectangle
var xy2 = new Point(467,310); //Position of second rectangle
var size2 = new Size(115, 70); //Size of second rectangle
var r2 = makeRectangle(xy2, size2, c, col); //Make secont rectangle
var r1cent = r1.bounds.center; //Get the center points, they will be used as endpoints for the curve.
var r2cent = r2.bounds.center;
var connector = new Path(r1cent, r2cent); //Ok so I made this path... Now what? How do access and edit the handlers at endpoints like in the image?
connector.strokeColor = 'black'; //Give it some colour so we can see it.
You can paste all this code here without any setup, it's a good way to test the framework.
You can use Segment objects when defining the connector rather than using Points (or you can set the handleIn and handleOut properties after creating the path).
The doc is here: Segment
And here is a sketch showing how to use handleIn and handleOut with your code:
sketch.paperjs.org solution

snap.svg save element and paste it to another

I create some lines in my Paper:
var svg = Snap("#svg_container");
var linesContainer = {};
var line = svg.line( 0, 0, 200, 200).attr(...);
linesContainer[someID] = line;
then i clear the Snap / create a new. I want to have the stored object also in my new snap:
svg = Snap("#svg_container");
svg.clear();
//something like:
//svg.append(linesContainer[someID]);
is this possible?
Here script with using SnapSVG.
var linesContainer = []; // not {}
lineContainer[linesContainer.length] = svg.line( 0, 0, 200, 200).attr(...);
// or 2nd way .. u can definitely make objects with value x,y, attrs and store them, but it helps reducing a storage of using memory.
U can put line to svg like that.
svg = Snap("#svg_container");
svg.clear();
for(i=0;i<lineContainer.length;i++)
svg.add(lineContainer[i]);

Native cursor in Adobe AIR JavaScript with MouseCursorData

I've been reading this article: http://blogs.adobe.com/cantrell/archives/2011/03/native-cursors-in-air-2-6.html on how to create a native cursor in AIR without having to hack it by moving a sprite in place of a hidden cursor to fake it.
However I'm using HTML/JavaScript instead of ActionScript.
So far I have:
function nativeCursor(){
// load in a bitmap
var loader = new air.Loader();
loader.load(new air.URLRequest('./assets/cursor.png'));
var bitmaps = new air.Vector["<String>"]();
var bmd = new air.BitmapData(32, 32, true, 0x00000000);
var p = new window.runtime.flash.geom.Point(0, 0);
var r = new window.runtime.flash.geom.Rectangle(32 , 0, 32, 32);
var image = new window.runtime.flash.display.Bitmap(loader.content);
bmd.copyPixels([image.bitmapData], r, p);
bitmaps.push(bmd);
var mcd = new window.runtime.flash.ui.MouseCursorData();
mcd.data = bitmaps;
mcd.hotSpot = new Point(0, 0);
mcd.frameRate = 24;
window.runtime.flash.ui.Mouse.registerCursor("defaultCursor", mcd);
window.runtime.flash.ui.Mouse.cursor = "defaultCursor";
}
But I get an error TypeError: Error #1034: Type Coercion failed: cannot convert []#2b9d1f1 to flash.display.BitmapData. for this line: bmd.copyPixels([image.bitmapData], r, p);
If I remove the brackets for that line so it's just: bmd.copyPixels(image.bitmapData, r, p); the error becomes TypeError: Error #2007: Parameter sourceBitmapData must be non-null.
So I'm assuming that the error is because the bitmap data is null... but why? The image is being loaded in fine so is the way I'm trying to get the bitmap data incorrect?
BitmapData, not String
The vector is supposed to be of type BitmapData, not String, that is:
air.Vector["<flash.display.BitmapData>"]
See HTML Developer’s Guide for Adobe AIR - Working with Vectors for more information.
Asynchronous loaders
Also the Loader class probably works asynchronously in JavaScript too, it's not documented properly in the HTML API reference and I've never used JS for AIR development, so I can only assume that, and that one can refer to the AS3 reference for the missing docs, however it makes sense judging from the available examples.
http://help.adobe.com/.../html/flash/display/BitmapData.html#includeExamplesSummary
Loader.bitmapData doesn't exist
There is no bitmapData property on the Loader class, only a content property that holds a DisplayObject, which might actually be a Bitmap object which in turn has a bitmapData property.
An example
Here's some untested example code that should get you started:
var mcd = new window.runtime.flash.ui.MouseCursorData();
mcd.hotSpot = new air.Point(0, 0);
mcd.frameRate = 24;
var loader = new air.Loader();
loader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, function(event)
{
var image = air.Bitmap(loader.content);
var bitmaps = new air.Vector["<flash.display.BitmapData>"]();
bitmaps.push(image.bitmapData);
mcd.data = bitmaps;
air.Mouse.registerCursor('defaultCursor', mcd);
air.Mouse.cursor = 'defaultCursor';
});
var request = new air.URLRequest('./assets/cursor.png');
loader.load(request);

How can I create a canvas imageData array from an arrayBuffer representation of a JPG

First of all I am aware there are standard methods of achieving this (readAsDataURL and drawImage), but unfortunately they are not usable for this specific use case.
I am reading an image using the filereader API as an arraybuffer like so:
var reader = new fileReader();
reader.onload = function(e){
var byteArray = new Uint8ClampedArray(e.target.result);
//do stuff to this array
}
reader.readAsArrayBuffer(file);
I am then creating a clampedarray with this returned data.
What I want to be able to do is now draw this pixel array directly to a canvas using putImageData
Currently I am doing the following:
var byteArray = new Uint8ClampedArray(e.target.result);
var imgdata = ctx.createImageData(img.width, img.height);
var canvdata = imgdata.data;
for (var i = 0; i < canvdata.length; i += 4) {
canvdata[i] = byteArray[i];
canvdata[i + 1] = byteArray[i + 1];
canvdata[i + 2] = byteArray[i + 2];
canvdata[i + 3] = byteArray[i + 3];
}
ctx.putImageData(imgdata, 0, 0);
Using this method, although the data gets drawn to the canvas, it appears like garbled snow or noise and is not a correct representation of the image.
This leads me to believe that I am constructing the imagedata data incorrectly in my loop or perhaps my initial method of getting the pixel array is incorrect.
To summarize, I would like to be able to take an arraybuffer (of a jpeg) retrieved via the html5 fileReader API and then create a canvas compatible imageData array, so that it can later be pushed into a canvas using putImageData
Thanks in advance.
Edit
A JPEG file isn't a simple byte-array of colour data, and therefore you can't simply load it in like this. If you want to get around this without importing directly into a canvas you'll have to use a JPEG decoding library, such as this project by notmasteryet which I found via a quick google search.
Original
unfortunately they are not usable for this specific use case
Why are they not usable?
// example array
u = new Uint8ClampedArray(4);
u[0] = 255, u[1] = 56, u[2] = 201, u[3] = 8; // [255, 56, 201, 8]
// to String
str = String.fromCharCode.apply(null, u); // "ÿ8É"
// to Base64
b64 = btoa(str); // "/zjJCA=="
// to DataURI
uri = 'data:image/jpeg;base64,' + b64; // "data:image/jpeg;base64,/zjJCA=="
And the reverse
// uri to Base64
b64 = uri.slice(uri.indexOf(',')+1);
// to String
str = atob(b64);
// to Array
arr = str.split('').map(function (e) {return e.charCodeAt(0);});
// to Uint8ClampedArray
u = new Uint8ClampedArray(arr); // [255, 56, 201, 8]

Categories

Resources