We Keep Coding

Cropping Image in Fabric Js

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.

How to get reference to the particular image on canvas on mouse click?

The situation is : I have to draw an image on canvas dynamically.
The code is :
HTML :
<canvas id="canvas" width="500px" height="300px"></canvas>
<input type="file" id="file-input">
jquery :
$(function() {
$('#file-input').change(function(e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
var canvas = $('#canvas')[0];
var context = canvas.getContext('2d');
$img.load(function() {
context.drawImage(this, 0, 0);
});
}
});
It adds the image to the top left corner. But now I might need to shift the image to another position by dragging and dropping. Also, I need to resize the image in similar way. For that I need to select the image (by getting reference to that image) on mouse click. I could have done that by checking if the mouse click coordinates overlaps with any image area. But if there are large number of images, this way will be inefficient (storing images in array and checking with each of them). Is there any more efficient way ?
PS : I am trying to build a UI designer which generates UI by dragging and dropping the elements in angular. I just started with the image element.
Edit 1 - I could use Fabric.js canvas instead. But still I would like to know if this can be done on native canvas too.

Draw a textbox on canvas that contains an image and some drawing over it using fabric js

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>

Canvas image cannot show all and is clipped can only show part of the image

I got the image shown but can only show part of the image. I'm wondering if there is any way to show the image as a whole!
var canvas=document.getElementById("Mat_canvas");
canvas.addEventListener('keydown',doKeyDown,true);
var canvt=canvas.getContext("2d");
var img_obj=new Image();
img_obj.onload=function(){
//canvt.align='center';
canvt.drawImage(img_obj,0,0);
};

You can resize your canvas in the image onload callback:
var canvas=document.getElementById("Mat_canvas");
canvas.addEventListener('keydown',doKeyDown,true);
var canvt=canvas.getContext("2d");
var img_obj=new Image();
img_obj.onload=function(){
//canvt.align='center';
// resize the canvas to the same size as the source image
canvas.width=img_obj.width;
canvas.height=img_obj.height;
canvt.drawImage(img_obj,0,0);
};

Replacing divs with background images with canvas elements

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.