I am using fabricJS 1.5 and I want to add a background image to the rect object. I am able to add using setPattrenFill property but image does not contain inside the rect completely. Either I have to use repeat: 'repeat' in options which I do not want or some part of rectangle remains empty.
This is what I have tried yet on this:
var rect = new fabric.Rect({
name: "canvasBase",
left: 500,
top: 500,
width: localStorage.get('width'),
height: localStorage.get('height'),
fill: '#fff',
angle: 0,
});
var img = new Image();
img.onload = function(){
fabric.util.loadImage(src, function(img) {
rect.setPatternFill({
source: img,
repeat: 'no-repeat'
});
canvas.fabric.renderAll();
});
}
Please Help.
Related
Is there any option to add pattern with Image AND Color?
Anytime, when I apply an image as a pattern, even though the image is transparent, Fabric adds it with some kind of "gray layer".
Link to Fiddler
var canvas = window.canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
width: 256,
height: 256,
fill: 'red'
});
canvas.add(rect);
rect.center().setCoords();
fabric.util.loadImage('https://assets-cdn.github.com/images/modules/site/integrators/slackhq.png', function (img) {
rect.setPatternFill({
source: img,
repeat: 'no-repeat'
});
canvas.renderAll();
});
Any idea?
Assuming the image has transparent background, you can use fabric.StaticCanvas as fabric.Pattern's source:
var imgPath = 'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png'
var imgColor = 'grey'
var canvas = this.__canvas = new fabric.Canvas('c')
fabric.Image.fromURL(imgPath, function(img) {
var patternSourceCanvas = new fabric.StaticCanvas()
patternSourceCanvas.add(img)
patternSourceCanvas.setBackgroundColor(imgColor, patternSourceCanvas.renderAll.bind(patternSourceCanvas))
var pattern = new fabric.Pattern({
source: function() {
return patternSourceCanvas.getElement();
},
repeat: 'repeat'
})
// create a rectangle object
var rect = new fabric.Rect({
fill: pattern,
width: 400,
height: 400
})
// "add" rectangle onto canvas
canvas.add(rect)
})
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>
How to insert filters in background image in fabric.js?
function backchange(img)
{
var imag = img.src;
canvas.setBackgroundImage(imag, canvas.renderAll.bind(canvas), {
width: canvas.width,
height: canvas.height,
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
});
}
I can add filters in the images selectable, but how put filters on the images background that is not selectable?
Thanks for any help
write a callback, to replace canvas.renderAll.bind(canvas), and refer to canvas.backgroundImage to add filters to the image.
function backchange(img) {
var imag = img.src;
canvas.setBackgroundImage(
imag,
function() {
canvas.backgroundImage.filters.push(new fabric.Image.Filters....);
canvas.backgroundImage.applyFilters();
canvas.renderAll();
},
{
width: canvas.width,
height: canvas.height,
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
}
);
}
Using this as a base: http://fabricjs.com/image-filters
You can target the background this way (just basing this on the: function applyFilter) and setting Sepia on the background.
obj = canvas.backgroundImage;
obj.filters[3] = new f.Sepia();
obj.applyFilters(canvas.renderAll.bind(canvas));
I want to create a group that is 300px wide and 200px high, and then load a few things inside that group. When I load images in that are larger than the group dimensions, it bleeds outside the group. I'd love to "crop" the image (similar to a CSS overflow:hidden property).
Is this possible?
To accomplish your task you should use the clipTo function on your image, the clipTo function on a group already has an open bug, btw you can work around there, by transpose the dimension and the position of your group to clipTo function:
clipTo :Function § Function that determines clipping of an object
(context is passed as a first argument) Note that context origin is at
the object's center point (not left/top corner)
Take a look to official demo, then after the clip operation on your image you can add it to a group(run below script to see an example).
var canvas = window.__canvas = new fabric.Canvas('c');
var path = 'http://fabricjs.com/lib/pug.jpg';
var _img = new Image();
_img.onload = function(img) {
var dog = new fabric.Image(_img, {
left: 100,
top: 100,
width: 300,
height: 300,
selectable: false,
clipName: 'dog',
clipTo: function(ctx) {
ctx.rect(0, 0, 50, 50);
}
});
var group = new fabric.Group([dog], {
left: 100,
top: 100,
width: 100,
height: 100,
borderColor: 'black',
});
canvas.add(group);
};
_img.src = path;
canvas.renderAll();
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<canvas id="c" height="300" width="300" style="border:1px dashed #333;"></canvas>
I have big canvas of 500x500 with an image (originally 500x500) reduced to 300x200. It is working fine but I want to reduce the canvas so that only the central portion of the original image is displayed. Is this possible?
Current code.
var canvas = new fabric.Canvas("myCanvas");
var img = new Image();
img.onload=function(){
var image = new fabric.Image(img,{name:"mainImage"});
image.set({
left:100,
top: 100,
angle: 0,
padding:10,
height:200,
width:300,
cornersize:10
});
}
img.src = imageUrl;
canvas.add(image);
canvas.renderAll();
Thanks in advance.
Yes, you can center your image with canvas.centerObject() function.
Example:
var canvas = new fabric.Canvas('myCanvas');
var src = "http://fabricjs.com/lib/pug.jpg";
fabric.Image.fromURL(src, function(oImg) {
oImg.set({
width: 300,
height: 200,
});
canvas.add(oImg);
canvas.centerObject(oImg);
canvas.renderAll();
});
Check this fiddle: http://jsfiddle.net/ckqk2Lzs/8/
I hope this help.
I've a canvas element and I create fabric object out of that. Now, I want to change the background color dynamically. The following doesn't work for me.
var x;
x = new fabric.Canvas("mycanvas", {
backgroundColor : "#fff",
selection: true
});
x.backgroundColor = "#f00";
The background color is white and it doesn't get changed to red.
You need to render canvas after changing properties, because properties of object is just properties and not handled by event
http://jsfiddle.net/oceog/gDhht/
var canvas = new fabric.Canvas('c',{backgroundColor : "#0ff"});
console.log(canvas);
canvas.backgroundColor="red";
canvas.renderTop();
canvas.add(
new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);
canvas.backgroundColor="green";
canvas.renderAll();
update: I tried with latest fabric, seems you not need renderAll() anymore.