I have this code in Fabric js, I have managed to crop image but when I load in the Canvas the cropped image is too small than the original image or Cropped Image. Another issue is after cropping some part are not cropped as selected.
fabric.Image.fromURL(imageUrl, function (img) {
var cropped = new Image();
cropped.src = canvas.toDataURL({
left: coodinates.xAxis,
top: coodinates.yAxis,
width: coodinates.width,
height: coodinates.height
});
cropped.onload = function() {
canvas.clear();
image = new fabric.Image(cropped);
image.left = coodinates.xAxis;
image.top = coodinates.yAxis;
image.width = coodinates.width;
image.height = coodinates.height;
image.setCoords();
canvas.add(image);
canvas.renderAll();
};
});
I have tried using different options like drawing a Rectangle in the canvas but still did not resolve my issue.
Related
I am trying to draw a textbox on canvas that contains an image and some drawing over it. now I am trying to draw a textbox over it.
When I am trying to initialize canvas object using fabricJS it's making canvas empty first. like..
var canvas = new fabric.Canvas('mycanvas')
after this code, it makes canvas empty. but if I initialize this code in the very beginning just after canvas initialized and then I try to add a textbox to that canvas object like...
var text = new fabric.Textbox('A Computer Science Portal',
{
width: 450,
height: 10,
top: 100,
left: 100,
});
this.canvas.add(text);
Then the textbox is not visible. I think it went in the background of the image.
I have already written lots of code for drawing over the canvas not want to draw textbox on the canvas after with all existing drawing and image that is developed in javascript only.
On Fabric you have bringToFront use that to keep the text on top.
Here is the official documentation:
http://fabricjs.com/docs/fabric.Canvas.html#bringToFront
Sample code:
var image;
var canvas = new fabric.Canvas('canvas');
var url = "http://swagger-net-test.azurewebsites.net/api/SvgImage?"
var text = new fabric.Textbox('TEST', { width: 90, height: 10, top: 30, left: 50 });
this.canvas.add(text);
function loadSVG(url) {
fabric.loadSVGFromURL(url, function(objects, options) {
if (image) canvas.remove(image);
image = fabric.util.groupSVGElements(objects, options);
image.name = 'sticker';
canvas.add(image);
image.scaleToHeight(100);
image.center();
image.setCoords();
canvas.renderAll();
canvas.bringToFront(text)
});
}
loadSVG(url + "color=red")
setTimeout(function() {
loadSVG(url + "color=blue")
}, 3000);
<canvas id="canvas" width="200" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
I am using FabricJS and i want to load gif image object on canvas.
I already loaded gif image on canvas but gif image animation is not working.
is there any way to render gif image animation with object in canvas ?
I am using below code for render gif image.
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('./assets/images/e8nZC.gif', function(myImg) {
var img1 = myImg.set({ left: 0, top: 0 ,width:400,height:400});
canvas.add(img1);
fabric.util.requestAnimFrame(function render() {
canvas.renderAll();
fabric.util.requestAnimFrame(render);
});
});
I build an image editor in javascript for my customer and we issue one huge problem. When we want to generate image where is some text rotated, canvas not generate full image with all contents over background.
Here is example:
When I click on save button I get empty background like this:
On other way, when I just add content and NOT do rotation, transform not exists in CSS, I can change color of text, change font, change background and all will look nice like on this example:
Result is perfect:
Here is my code:
function generateImage(canvas, width){
var img = new Image();
img.crossOrigin = "Anonymous";
img.width = width;
img.height = (img.width / ( 16 / 9 ));
img.src = canvas.toDataURL();
img.align = 'middle';
img.class = 'img-responsive';
img.style.width = '100%';
img.style.maxWidth = width;
document.body.appendChild(img);
}
html2canvas($this, {
onrendered: function(canvas) {
generateImage(canvas, ($this.width()+2));
},
width: $this.width()+2,
height: $this.height()+2
});
The main question is:
Is there a way to add in canvas CSS transition support to can render proper full image or some 3D canvas drawing which work properly?
I understand that Canvas is as ink dries and each item that is draw is on top.
I'm having a little problem, I have a list of sources of background images
var sources = {
bg: 'images/room-1/bg.png',
rightWall: 'images/room-1/wall-right.png',
leftWall: 'images/room-1/wall-left.png',
beam: 'images/room-1/beam-left.png',
sofa: 'images/room-1/sofa.png'
};
loadImages(sources, function(images) {
context.drawImage(images.bg, 0, 0, 760, 500);
context.drawImage(images.rightWall, 714, 0, 46, 392);
context.drawImage(images.leftWall, 0, 160, 194,322);
context.drawImage(images.beam, 0, 45, 143,110);
context.drawImage(images.sofa, 194, 280, 436,140);
});
This is fine and they order how I like.
My issue is I have an image upload for a user to upload their image into the Canvas.
I am just using an upload box to test the theory, but the idea is the user will upload their image, crop, scale it, using JQuery / PHP and this saves the image. I will then grab this manipulated URL and pull this in, however the problem is that the Canvas is loaded so when i upload an image, it goes on top off the sources image.
I do not want to use multiple Canvas as I need to save this canvas as an image as a whole.
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = 760;
canvas.height = 300;
}
img.src = event.target.result;
img.onload = function(){
context.drawImage(img, 0, 0);
};
}
reader.readAsDataURL(e.target.files[0]);
}
Canvas does not have layers.
But you can still get 1 final image with both your background and your user's scaled/rotated foreground.
Since you want to let the user rotate/scale their image but you don't want to affect the background, you will need 2 canvases -- a background canvas and a user canvas.
// HTML
<div id="container">
<canvas id="background" class="subcanvs" width=760 height=300></canvas>
<canvas id="canvas" class="subcanvs" width=760 height=300></canvas>
</div>
// CSS
#container{
position:relative;
border:1px solid blue;
width:760px;
height:300px;
}
.subcanvs{
position:absolute;
}
// JavaScript
// a background canvas
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");
// a foreground canvas the user can rotate/scale
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
Then when the user is done rotating/scaling, drawImage the users canvas to the background canvas.
// combine the users finished canvas with the background canvas
bkCtx.drawImage(canvas,0,0);
// and save the background canvas (now it's combined) as an image
var imageURL=background.toDataURL();
I am trying to replace any divs that have background images with canvas elements with those background images drawn onto them.
I've got the basics working but I am slightly stumped by the difference in image quality between the background-image on a div and the same image drawn onto a canvas.
Here is the code I am using to do this:
$('#container div').each(function(){
if($(this).css('background-image') != 'none'){
var bgImage = $(this).css('background-image').replace(/^url|[\(\)]/g, '');
var image = new Image();
var attrs = $(this)[0].attributes;
var dimensions = new Array();
var canvas = document.createElement('canvas');
dimensions.push($(this).height())
dimensions.push($(this).width());
$(canvas).attr('width',dimensions[0]);
$(canvas).attr('height',dimensions[1]);
$(canvas).css('background-image', 'none');
for(var i = 0; i < attrs.length; i++){
$(canvas).attr(attrs[i].nodeName,attrs[i].nodeValue);
}
var ctx = canvas.getContext('2d');
image.onload = function () {
ctx.drawImage(image, 0, 0, image.height, image.width);
}
image.src = bgImage;
$(this).replaceWith(canvas);
}
});
Here are the results:
It looks like the image is being stretched for some reason but I've tried to console.log the width/height of the image that I am using in drawImage and the values match up to the image dimensions. The results show just a crop of the image - the real one is 900x4000ish pixels.
Here is a jsfiddle link showing the problem in action:
http://jsfiddle.net/xRKJt/
What is causing this odd behaviour?
Ha! (took some seconds to figure out)
Image has naturalWidth and naturalHeight attributes which reflect its pixel dimensions. Change your code
image.onload = function () {
ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
}
Because the image is so large, if you open the image in the browser it zooms out it by default. I think you'll get those zoomed out width and height attributes if you try to access image.width and image.height. Or something along the lines.