Actually, I’man issue when I apply filters; it cuts the image width to half of the canvas, but I want filters implemented smoothly without losing the image width. I tried it, but it did not work for me. I’m using fabric.js library for canvas.
New contributor
Muhammad Shoaib is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
<code> Here is my code.
// intial image load
const loadImage = () => {
canvas?.clear();
fabric.Image.fromURL(src, function (img) {
img.set({ id: 'main_canvas_image', hasControls: false });
img.set({ scaleX: 1, scaleY: 1 });
img.scaleToWidth(canvas.width);
if (img.height < canvas.height) {
img.scaleToHeight(canvas.height);
}
canvas.add(img);
canvas.renderAll();
loadFilterPreview();
});
handleImageMoving();
};
// filters list with preview
const loadFilterPreview = () => {
const filtersList = [
new fabric.Image.filters.Vibrance({ vibrance: 1 }),
new fabric.Image.filters.Contrast({ contrast: 0.1 }),
new fabric.Image.filters.Brightness({ brightness: 0.1 }),
new fabric.Image.filters.Gamma({ gamma: [1, 2, 2] }),
new fabric.Image.filters.HueRotation({ rotation: 90 }),
new fabric.Image.filters.Brightness({ brightness: 0.5 }),
];
const updatedPreviews = [
{ label: 'Original', preview: '', filters: [] },
{
label: 'Studio',
preview: '',
filters: [filtersList[0], filtersList[1]],
},
{ label: 'Spotlight', preview: '', filters: [filtersList[2]] },
{ label: 'Prime', preview: '', filters: [filtersList[3]] },
{ label: 'Classic', preview: '', filters: [filtersList[4]] },
{ label: 'Edge', preview: '', filters: [filtersList[5]] },
{ label: 'Luminate', preview: '', filters: [filtersList[6]] },
];
setFilterPreview(
updatedPreviews.map(filterItem => ({
...filterItem,
preview: canvas?.toDataURL?.(),
}))
);
};
// useEffect for handle filter change
useEffect(() => {
const current = filterPreview.find(e => e.label === filter);
if (current && canvas) {
const canvasImage = canvas
?.getObjects()
?.find(e => e.id === 'main_canvas_image');
canvasImage.filters = current.filters;
canvasImage.applyFilters();`your text`
canvasImage.scaleToWidth(canvas.width);
canvas.renderAll();
}
}, [filter]);`
</code>
<code> Here is my code.
// intial image load
const loadImage = () => {
canvas?.clear();
fabric.Image.fromURL(src, function (img) {
img.set({ id: 'main_canvas_image', hasControls: false });
img.set({ scaleX: 1, scaleY: 1 });
img.scaleToWidth(canvas.width);
if (img.height < canvas.height) {
img.scaleToHeight(canvas.height);
}
canvas.add(img);
canvas.renderAll();
loadFilterPreview();
});
handleImageMoving();
};
// filters list with preview
const loadFilterPreview = () => {
const filtersList = [
new fabric.Image.filters.Vibrance({ vibrance: 1 }),
new fabric.Image.filters.Contrast({ contrast: 0.1 }),
new fabric.Image.filters.Brightness({ brightness: 0.1 }),
new fabric.Image.filters.Gamma({ gamma: [1, 2, 2] }),
new fabric.Image.filters.HueRotation({ rotation: 90 }),
new fabric.Image.filters.Brightness({ brightness: 0.5 }),
];
const updatedPreviews = [
{ label: 'Original', preview: '', filters: [] },
{
label: 'Studio',
preview: '',
filters: [filtersList[0], filtersList[1]],
},
{ label: 'Spotlight', preview: '', filters: [filtersList[2]] },
{ label: 'Prime', preview: '', filters: [filtersList[3]] },
{ label: 'Classic', preview: '', filters: [filtersList[4]] },
{ label: 'Edge', preview: '', filters: [filtersList[5]] },
{ label: 'Luminate', preview: '', filters: [filtersList[6]] },
];
setFilterPreview(
updatedPreviews.map(filterItem => ({
...filterItem,
preview: canvas?.toDataURL?.(),
}))
);
};
// useEffect for handle filter change
useEffect(() => {
const current = filterPreview.find(e => e.label === filter);
if (current && canvas) {
const canvasImage = canvas
?.getObjects()
?.find(e => e.id === 'main_canvas_image');
canvasImage.filters = current.filters;
canvasImage.applyFilters();`your text`
canvasImage.scaleToWidth(canvas.width);
canvas.renderAll();
}
}, [filter]);`
</code>
Here is my code.
// intial image load
const loadImage = () => {
canvas?.clear();
fabric.Image.fromURL(src, function (img) {
img.set({ id: 'main_canvas_image', hasControls: false });
img.set({ scaleX: 1, scaleY: 1 });
img.scaleToWidth(canvas.width);
if (img.height < canvas.height) {
img.scaleToHeight(canvas.height);
}
canvas.add(img);
canvas.renderAll();
loadFilterPreview();
});
handleImageMoving();
};
// filters list with preview
const loadFilterPreview = () => {
const filtersList = [
new fabric.Image.filters.Vibrance({ vibrance: 1 }),
new fabric.Image.filters.Contrast({ contrast: 0.1 }),
new fabric.Image.filters.Brightness({ brightness: 0.1 }),
new fabric.Image.filters.Gamma({ gamma: [1, 2, 2] }),
new fabric.Image.filters.HueRotation({ rotation: 90 }),
new fabric.Image.filters.Brightness({ brightness: 0.5 }),
];
const updatedPreviews = [
{ label: 'Original', preview: '', filters: [] },
{
label: 'Studio',
preview: '',
filters: [filtersList[0], filtersList[1]],
},
{ label: 'Spotlight', preview: '', filters: [filtersList[2]] },
{ label: 'Prime', preview: '', filters: [filtersList[3]] },
{ label: 'Classic', preview: '', filters: [filtersList[4]] },
{ label: 'Edge', preview: '', filters: [filtersList[5]] },
{ label: 'Luminate', preview: '', filters: [filtersList[6]] },
];
setFilterPreview(
updatedPreviews.map(filterItem => ({
...filterItem,
preview: canvas?.toDataURL?.(),
}))
);
};
// useEffect for handle filter change
useEffect(() => {
const current = filterPreview.find(e => e.label === filter);
if (current && canvas) {
const canvasImage = canvas
?.getObjects()
?.find(e => e.id === 'main_canvas_image');
canvasImage.filters = current.filters;
canvasImage.applyFilters();`your text`
canvasImage.scaleToWidth(canvas.width);
canvas.renderAll();
}
}, [filter]);`
New contributor
Muhammad Shoaib is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.