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.
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'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()
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);
I am using an SVG image as a background pattern for an HTML5 canvas element, using the following syntax:
var img = new Image();
img.onload = function() {
var pattern = badge.createPattern(img, 'repeat');
badge.fillStyle = pattern;
// draw 'badge' shape
badge.fill();
};
img.src = '../flags/iso/'+country+'.svg';
This works as expected in Firefox and Chrome, but in Safari (7.0.3) the background is blank (white). Using a png or jpg for the background image works as expected in Safari et al - it's only SVGs that render incorrectly.
Any pointers gratefully received. There are many other reports of Safari SVG bugs around, but I'm unsure if this is specific to that, or something to do with Canvas implementation.
UPDATE: This is a previously reported bug in Safari, but no action seems to have been taken. Problem is using SVG to createPattern.
If Safari cannot load SVGs with createPattern, are there any other alternatives to loading images into irregular shapes (polygons) in the canvas, acting as background images?
Possible workaround
You could try getting around by creating a bitmap image from the SVG first via canvas, then use that canvas as image source for the pattern:
var img = new Image();
img.onload = function() {
// canvas image source for pattern:
var svgCanvas = document.createElement("canvas");
svgCanvas.width = this.width;
svgCanvas.height = this.height;
// draw in the SVG to canvas
var svgCtx = svgCanvas.getContext("2d");
svgCtx.drawImage(this, 0, 0, this.width, this.height);
// use canvas as image source instead
var pattern = badge.createPattern(svgCanvas, 'repeat');
badge.fillStyle = pattern;
// draw 'badge' shape
badge.fill();
};
img.src = '../flags/iso/'+country+'.svg';
I have a KineticJS stage with a lot of layers.
I found this post: How to copy a kineticjs stage to another canvas
It says that I get a canvas element from a layer as
var canvasElement = layer.getCanvas().getElement();
Is it also possible to export a stage into a canvas?
In your use case you can do this:
In hard way you can create custom canvas element (or Kinetic.Layer), then conver Stage to Image, draw the image to canvas (layer) then pass it to plugin.
But this way should also work. I just saw plugin source. It is very simple (js part). I edited it:
stage.toDataURL({
callback : function(data) {
var imageData = data.replace(/data:image\/png;base64,/,'');
return cordova.exec(function() {
// done callback
}, function() {
// fail callback
}, "Canvas2ImagePlugin","saveImageDataToLibrary",[imageData])
}
});