I'm using Canvas to process an image in various ways using it's image data only. I'm getting the image like this:
const vid = document.querySelector('video');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
But if I don't physically draw the image on the screen like this:
context.drawImage(vid, 0, 0, canvas.width, canvas.height);
then I can't process it's image data...is there any way this can all be done in data? I have no use to display the image in my app at all. Is there any way to draw it to the buffer only or something?
All I'm doing is capturing the image and then processing it's image data so I have no need to display it anywhere.
You can dynamically create a canvas element using Javascript like
var canvas=document.createElement("canvas");
get it's context
var context = canvas.getContext('2d');
and ultimately don't append it to the DOM by omitting
document.body.appendChild(canvas);
Even though you're still able to do all drawing operations e.g. drawImage()
Related
I am using canvas lib for converting sag to canvas however I can't figure out how to get converted canvas and store it in the variable?
function converttoCanvas(svg, callback) {
var canvas = document.createElement("canvas"); // Create a Canvas element.
var ctx = canvas.getContext("2d"); // For Canvas returns 2D graphic.
var data = svg.outerHTML; // Get SVG element as HTML code.
Canvg(canvas, data); // Render SVG on Canvas.
callback(canvas); // Execute callback function.
}
I just found this code from the blog but seems like I am doing something wrong. How can I get the new canvas element stored in the variable?
I am using fabric.js to convert svg to canvas, the code that i use works fine in chrome but in IE 11 the canvas that is created is getting tainted thus preventing me from reading data from canvas,below is code that i use
var d3canvas = document.createElement('canvas');
d3canvas.id = canvasId;
fabric.loadSVGFromString(svg.node().parentNode.innerHTML, function (objects, options) {
var canvasObj = new fabric.Canvas(canvasId);
var obj = fabric.util.groupSVGElements(objects, options);
canvasObj.add(obj).renderAll();
var canvasdata = d3canvas.toDataURL("image/bmp");//this line causes error as canvas is tainted
}
my question is whether there is a way to create canvas from svg without tainting the canvas in Fabric.js?
Note:I have already used canvg to convert svg to canvas but as the svg is complex its not getting properly converted to canvas
First deselect all object of canvas and use below code to convert canvas to SVG.
canvas.deactivateAllWithDispatch();
canvas.renderAll();
var image = canvas.toSVG();
var svg_image = "data:image/svg+xml,"+encodeURIComponent(image);
You will get SVG image value into svg_image variable.
I am attempting to use a chrome extension to take a screenshot of the current page, and then draw some shapes on it. After I have done that to the image, I turn the whole thing into a canvas that way it is all together, like the divs I have drawn on it are now baked into the 'image', and they are one in the same. After doing this, I want to turn the canvas back into a png image I can use to push to a service I have, but when I go to use the canvas.toDataURL() in order to do so, the image source that it creates is completely transparent. If I do it as a jpeg, it is completely black.
I read something about the canvas being 'dirtied' because I have drawn an image to it, and that this won't work in Chrome, but that doesn't make sense to me as I have gotten it to work before, but I am unable to use my previous method. Below is the code snippet that isn't working. I am just making a canvas element, and then I am drawing an image before that.
var passes = rectangles.length;
var run = 0;
var context = hiDefCanvas.getContext('2d');
while (run < passes) {
var rect = rectangles[run];
// Set the stroke and fill color
context.strokeStyle = 'rgba(0,255,130,0.7)';
context.fillStyle = 'rgba(0,0,255,0.1)';
context.rect(rect.left, rect.top, rect.width, rect.height);
context.setLineDash([2,1]);
context.lineWidth = 2;
run++;
} // end of the while loop
screencapImage.className = 'hide';
context.fill();
context.stroke();
console.log(hiDefCanvas.toDataURL());
And the image data that it returns is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC which is a blank, transparent image.
Is there something special I need to do with Chrome? Is there something that I am missing? Thanks, I appreciate the time and help.
Had the same problem, and found the solution here:
https://bugzilla.mozilla.org/show_bug.cgi?id=749824
"I can confirm, that it works if you set preserveDrawingBuffer.
var glContextAttributes = { preserveDrawingBuffer: true };
var gl = canvas.getContext("experimental-webgl", glContextAttributes);"
After getting the context with preserveDrawingBuffer, toDataURL just works as expected, no completely transparent or black image.
Having a similar problem I found a solution, thanks to the following post
https://github.com/iddan/react-native-canvas/issues/29.
These methods return a promise, so you would need to wait for it to resolve before the variable can be populated.
My solution was to set asyn function and await for the result:
const canvas = <HTMLCanvasElement>document.getElementById("myCanvas")[0];
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = async (e) => { ctx.drawImage(img, 0, 0); ctx.font = "165px Arial";ctx.fillStyle = "white"; b64Code = await (<any>canvas).toDataURL(); }
I have a canvas with some pictures and I would like to load it onto a texture much like an image with ImageUtils. As you know canvas has no 'onfinished' rendering callback so I am at the mercy of THREE here. I have come across this but this seems to be tightly coupled with AJAX.
You can read the image from the canvas as a data url:
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
After you execute drawImage on the canvas, the image data is already going to be inside there.
These data urls then can be used as textures in Three.js.
var texture = THREE.ImageUtils.loadTexture(dataURL);
Update
You could also try this for debugging:
var texture = THREE.ImageUtils.loadTexture(dataURL, undefined, function(texture){
// Handler for onLoad, this returns the img
console.log(texture);
},
function(event){
// Handler for onError, it returns the error event
console.log(event);
});
I am using sketch.js to enable a user to draw something on the canvas while the page is live.
I wanted to know if it would be possible to allow the user to draw a shape and then fill it with some color while the program is running
From what I read on the site, this script allows you only to free sketch something, not to draw specific shapes. If you'd like to draw a shape to the canvas you should use EaselJS
var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
Or you could use directly the canvas, without EaselJS
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,150,100);