Distorting images using FabricJS filters and custom controls, by dragging the corner control points of an image - html5-canvas

Question

I am trying to implement distortion in Fabric.js. And it is working preatty good so far. But now I need to make it work when the object has an angle/rotation. And I Cant wrap my head around why it is not working.
I have been following this code. Question
When adding angle to the object the image will move the other corners/controls as well. But when i set the angle to 0 or remove it. It will work. Does any one know how to make it work with the angle/rotation. I want the corners to stay in place.
I tried to add the rotation to the _renderFill function. But did not work.
I also made a new fiddle
fabric.textureSize = 4096;
// Set default filter backend
fabric.filterBackend = new fabric.WebglFilterBackend();
fabric.isWebglSupported(fabric.textureSize);
fabric.Image.filters.Perspective = class extends fabric.Image.filters.BaseFilter {
/**
* Constructor
* #param {Object} [options] Options object
*/
constructor(options) {
super();
if (options) this.setOptions(options);
this.applyPixelRatio();
}
type = 'Perspective';
pixelRatio = fabric.devicePixelRatio;
bounds = {width: 0, height: 0, minX: 0, maxX: 0, minY: 0, maxY: 0};
hasRelativeCoordinates = true;
/**
* Array of attributes to send with buffers. do not modify
* #private
*//** #ts-ignore */
vertexSource = `
precision mediump float;
attribute vec2 aPosition;
attribute vec2 aUvs;
uniform float uStepW;
uniform float uStepH;
varying vec2 vUvs;
vec2 uResolution;
void main() {
vUvs = aUvs;
uResolution = vec2(uStepW, uStepH);
gl_Position = vec4(uResolution * aPosition * 2.0 - 1.0, 0.0, 1.0);
}
`;
fragmentSource = `
precision mediump float;
varying vec2 vUvs;
uniform sampler2D uSampler;
void main() {
gl_FragColor = texture2D(uSampler, vUvs);
}
`;
/**
* Return a map of attribute names to WebGLAttributeLocation objects.
*
* #param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
* #param {WebGLShaderProgram} program The shader program from which to take attribute locations.
* #returns {Object} A map of attribute names to attribute locations.
*/
getAttributeLocations(gl, program) {
return {
aPosition: gl.getAttribLocation(program, 'aPosition'),
aUvs: gl.getAttribLocation(program, 'aUvs'),
};
}
/**
* Send attribute data from this filter to its shader program on the GPU.
*
* #param {WebGLRenderingContext} gl The canvas context used to compile the shader program.
* #param {Object} attributeLocations A map of shader attribute names to their locations.
*/
sendAttributeData(gl, attributeLocations, data, type = 'aPosition') {
const attributeLocation = attributeLocations[type];
if (gl[type + 'vertexBuffer'] == null) {
gl[type + 'vertexBuffer'] = gl.createBuffer();
}
gl.bindBuffer(gl.ARRAY_BUFFER, gl[type+'vertexBuffer']);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
}
generateSurface() {
const corners = this.perspectiveCoords;
const surface = verb.geom.NurbsSurface.byCorners(...corners);
const tess = surface.tessellate();
return tess;
}
/**
* Apply the resize filter to the image
* Determines whether to use WebGL or Canvas2D based on the options.webgl flag.
*
* #param {Object} options
* #param {Number} options.passes The number of filters remaining to be executed
* #param {Boolean} options.webgl Whether to use webgl to render the filter.
* #param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered.
* #param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn.
* #param {WebGLRenderingContext} options.context The GL context used for rendering.
* #param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
*/
applyTo(options) {
if (options.webgl) {
const { width, height } = this.getPerspectiveBounds();
options.context.canvas.width = width;
options.context.canvas.height = height;
options.destinationWidth = width;
options.destinationHeight = height;
this.hasRelativeCoordinates && this.calculateCoordsByCorners();
this._setupFrameBuffer(options);
this.applyToWebGL(options);
this._swapTextures(options);
}
}
applyPixelRatio(coords = this.perspectiveCoords) {
for(let i = 0; i < coords.length; i++) {
coords[i][0] *= this.pixelRatio;
coords[i][1] *= this.pixelRatio;
}
return coords;
}
getPerspectiveBounds(coords = this.perspectiveCoords) {
coords = this.perspectiveCoords.slice().map(c => (
{
x: c[0],
y: c[1],
}
));
this.bounds.minX = fabric.util.array.min(coords, 'x') || 0;
this.bounds.minY = fabric.util.array.min(coords, 'y') || 0;
this.bounds.maxX = fabric.util.array.max(coords, 'x') || 0;
this.bounds.maxY = fabric.util.array.max(coords, 'y') || 0;
this.bounds.width = Math.abs(this.bounds.maxX - this.bounds.minX);
this.bounds.height = Math.abs(this.bounds.maxY - this.bounds.minY);
return {
width: this.bounds.width,
height: this.bounds.height,
minX: this.bounds.minX,
maxX: this.bounds.maxX,
minY: this.bounds.minY,
maxY: this.bounds.maxY,
};
}
/**
* #description coordinates are coming in relative to mockup item sections
* the following function normalizes the coords based on canvas corners
*
* #param {number[]} coords
*/
calculateCoordsByCorners(coords = this.perspectiveCoords) {
for(let i = 0; i < coords.length; i++) {
coords[i][0] -= this.bounds.minX;
coords[i][1] -= this.bounds.minY;
}
}
/**
* Apply this filter using webgl.
*
* #param {Object} options
* #param {Number} options.passes The number of filters remaining to be executed
* #param {Boolean} options.webgl Whether to use webgl to render the filter.
* #param {WebGLTexture} options.originalTexture The texture of the original input image.
* #param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered.
* #param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn.
* #param {WebGLRenderingContext} options.context The GL context used for rendering.
* #param {Object} options.programCache A map of compiled shader programs, keyed by filter type.
*/
applyToWebGL(options) {
const gl = options.context;
const shader = this.retrieveShader(options);
const tess = this.generateSurface(options.sourceWidth, options.sourceHeight);
const indices = new Uint16Array(_.flatten(tess.faces));
// Clear the canvas first
this.clear(gl); // !important
// bind texture buffer
this.bindTexture(gl, options);
gl.useProgram(shader.program);
// create the buffer
this.indexBuffer(gl, indices);
this.sendAttributeData(gl, shader.attributeLocations, new Float32Array(_.flatten(tess.points)), 'aPosition');
this.sendAttributeData(gl, shader.attributeLocations, new Float32Array(_.flatten(tess.uvs)), 'aUvs');
gl.uniform1f(shader.uniformLocations.uStepW, 1 / gl.canvas.width);
gl.uniform1f(shader.uniformLocations.uStepH, 1 / gl.canvas.height);
this.sendUniformData(gl, shader.uniformLocations);
gl.viewport(0, 0, options.destinationWidth, options.destinationHeight);
// enable indices up to 4294967296 for webGL 1.0
gl.getExtension('OES_element_index_uint');
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
}
clear(gl) {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
bindTexture(gl, options) {
if (options.pass === 0 && options.originalTexture) {
gl.bindTexture(gl.TEXTURE_2D, options.originalTexture);
} else {
gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture);
}
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
indexBuffer(gl, data) {
const indexBuffer = gl.createBuffer();
// make this buffer the current 'ELEMENT_ARRAY_BUFFER'
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// Fill the current element array buffer with data
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
}
};
/**
* Returns filter instance from an object representation
* #static
* #param {Object} object Object to create an instance from
* #param {function} [callback] to be invoked after filter creation
* #return {fabric.Image.filters.Perspective} Instance of fabric.Image.filters.Perspective
*/
fabric.Image.filters.Perspective.fromObject = fabric.Image.filters.BaseFilter.fromObject;
/**
* Photo subclass
* #class fabric.Photo
* #extends fabric.Photo
* #return {fabric.Photo} thisArg
*
*/
fabric.Photo = class extends fabric.Image {
type = 'photo';
repeat = 'no-repeat';
fill = 'transparent';
initPerspective = true;
cacheProperties = fabric.Image.prototype.cacheProperties.concat('perspectiveCoords');
constructor(src, options) {
super(options);
if (options) this.setOptions(options);
this.on('added', () => {
const image = new Image();
image.setAttribute('crossorigin', 'anonymous');
image.onload = () => {
this._initElement(image, options);
this.width = image.width / 2;
this.height = image.height / 2;
this.loaded = true;
this.setCoords();
this.fire('image:loaded');
};
image.src = src;
this.on('image:loaded', () => {
!this.perspectiveCoords && this.getInitialPerspective();
this.togglePerspective();
this.canvas.requestRenderAll();
});
});
}
cacheProperties = fabric.Image.prototype.cacheProperties.concat('perspectiveCoords');
/**
* #private
* #param {CanvasRenderingContext2D} ctx Context to render on
*//** #ts-ignore */
_render(ctx) {
fabric.util.setImageSmoothing(ctx, this.imageSmoothing);
if (this.isMoving !== true && this.resizeFilter && this._needsResize()) {
this.applyResizeFilters();
}
this._stroke(ctx);
this._renderPaintInOrder(ctx);
}
/**
* #private
* #param {CanvasRenderingContext2D} ctx Context to render on
*//** #ts-ignore */
_renderFill(ctx) {
var elementToDraw = this._element;
if (!elementToDraw) return;
ctx.save();
const elWidth = elementToDraw.naturalWidth || elementToDraw.width;
const elHeight = elementToDraw.naturalHeight || elementToDraw.height;
const width = this.width;
const height = this.height;
ctx.translate(-width / 2, -height / 2);
// get the scale
const scale = Math.min(width / elWidth, height / elHeight);
// get the top left position of the image
const x = (width / 2) - (elWidth / 2) * scale;
const y = (height / 2) - (elHeight / 2) * scale;
ctx.drawImage(elementToDraw, x, y, elWidth * scale, elHeight * scale);
ctx.restore();
}
togglePerspective(mode = true) {
this.set('perspectiveMode', mode);
// this.set('hasBorders', !mode);
if (mode === true) {
this.set('layout', 'fit');
var lastControl = this.perspectiveCoords.length - 1;
this.controls = this.perspectiveCoords.reduce((acc, coord, index) => {
const anchorIndex = index > 0 ? index - 1 : lastControl;
let name = `prs${index + 1}`;
acc[name] = new fabric.Control({
name,
x: -0.5,
y: -0.5,
actionHandler: this._actionWrapper(anchorIndex, (_, transform, x, y) => {
const target = transform.target;
const localPoint = target.toLocalPoint(new fabric.Point(x, y), 'left', 'top');
coord[0] = localPoint.x / target.scaleX * fabric.devicePixelRatio;
coord[1] = localPoint.y / target.scaleY * fabric.devicePixelRatio;
target.setCoords();
target.applyFilters();
return true;
}),
positionHandler: function (dim, finalMatrix, fabricObject) {
const zoom = fabricObject.canvas.getZoom();
const scalarX = fabricObject.scaleX * zoom / fabric.devicePixelRatio;
const scalarY = fabricObject.scaleY * zoom / fabric.devicePixelRatio;
var point = fabric.util.transformPoint({
x: this.x * dim.x + this.offsetX + coord[0] * scalarX,
y: this.y * dim.y + this.offsetY + coord[1] * scalarY,
}, finalMatrix
);
return point;
},
cursorStyleHandler: () => 'cell',
render: function(ctx, left, top, _, fabricObject) {
const zoom = fabricObject.canvas.getZoom();
const scalarX = fabricObject.scaleX * zoom / fabric.devicePixelRatio;
const scalarY = fabricObject.scaleY * zoom / fabric.devicePixelRatio;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.strokeStyle = 'green';
if (fabricObject.perspectiveCoords[index + 1]) {
ctx.strokeStyle = 'green';
ctx.lineTo(
(fabricObject.perspectiveCoords[index + 1][0] - coord[0]) * scalarX,
(fabricObject.perspectiveCoords[index + 1][1] - coord[1]) * scalarY,
);
} else {
ctx.lineTo(
(fabricObject.perspectiveCoords[0][0] - coord[0]) * scalarX,
(fabricObject.perspectiveCoords[0][1] - coord[1]) * scalarY,
);
}
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 4, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
ctx.restore();
},
offsetX: 0,
offsetY: 0,
actionName: 'perspective-coords',
});
return acc;
}, {});
} else {
this.controls = fabric.Photo.prototype.controls;
}
this.canvas.requestRenderAll();
}
_actionWrapper(anchorIndex, fn) {
return function(eventData, transform, x, y) {
if (!transform || !eventData) return;
const { target } = transform;
target._resetSizeAndPosition(anchorIndex);
const actionPerformed = fn(eventData, transform, x, y);
return actionPerformed;
};
}
/**
* #description manually reset the bounding box after points update
*
* #see http://fabricjs.com/custom-controls-polygon
* #param {number} index
*/
_resetSizeAndPosition = (index, apply = true) => {
const absolutePoint = fabric.util.transformPoint({
x: this.perspectiveCoords[index][0],
y: this.perspectiveCoords[index][1],
}, this.calcTransformMatrix());
let { height, width, left, top } = this._calcDimensions({});
const widthDiff = (width - this.width) / 2;
if ((left < 0 && widthDiff > 0) || (left > 0 && widthDiff < 0)) {
absolutePoint.x -= widthDiff;
} else {
absolutePoint.x += widthDiff;
}
const heightDiff = (height - this.height) / 2;
if ((top < 0 && heightDiff > 0) || (top > 0 && heightDiff < 0)) {
absolutePoint.y -= heightDiff;
} else {
absolutePoint.y += heightDiff;
}
this._setPositionDimensions({});
const penBaseSize = this._getNonTransformedDimensions();
const newX = (this.perspectiveCoords[index][0]) / penBaseSize.x;
const newY = (this.perspectiveCoords[index][1]) / penBaseSize.y;
this.setPositionByOrigin(absolutePoint, newX + 0.5, newY + 0.5);
apply && this._applyPointsOffset();
}
/**
* This is modified version of the internal fabric function
* this helps determine the size and the location of the path
*
* #param {object} options
*/
_setPositionDimensions(options) {
const { left, top, width, height } = this._calcDimensions(options);
this.width = width;
this.height = height;
var correctLeftTop = this.translateToGivenOrigin(
{
x: left,
y: top,
},
'left',
'top',
this.originX,
this.originY
);
if (typeof options.left === 'undefined') {
this.left = correctLeftTop.x;
}
if (typeof options.top === 'undefined') {
this.top = correctLeftTop.y;
}
this.pathOffset = {
x: left,
y: top,
};
return { left, top, width, height };
}
/**
* #description this is based on fabric.Path._calcDimensions
*
* #private
*/
_calcDimensions() {
const coords = this.perspectiveCoords.slice().map(c => (
{
x: c[0] / fabric.devicePixelRatio,
y: c[1] / fabric.devicePixelRatio,
}
));
const minX = fabric.util.array.min(coords, 'x') || 0;
const minY = fabric.util.array.min(coords, 'y') || 0;
const maxX = fabric.util.array.max(coords, 'x') || 0;
const maxY = fabric.util.array.max(coords, 'y') || 0;
const width = Math.abs(maxX - minX);
const height = Math.abs(maxY - minY);
return {
left: minX,
top: minY,
width: width,
height: height,
};
}
/**
* #description This is modified version of the internal fabric function
* this subtracts the path offset from each path points
*/
_applyPointsOffset() {
for (let i = 0; i < this.perspectiveCoords.length; i++) {
const coord = this.perspectiveCoords[i];
coord[0] -= this.pathOffset.x;
coord[1] -= this.pathOffset.y;
}
}
/**
* #description generate the initial coordinates for warping, based on image dimensions
*
*/
getInitialPerspective() {
let w = this.getScaledWidth();
let h = this.getScaledHeight();
const perspectiveCoords = [
[0, 0], // top left
[w, 0], // top right
[w, h], // bottom right
[0, h], // bottom left
];
this.perspectiveCoords = perspectiveCoords;
const perspectiveFilter = new fabric.Image.filters.Perspective({
hasRelativeCoordinates: false,
pixelRatio: fabric.devicePixelRatio, // the Photo is already retina ready
perspectiveCoords
});
this.filters.push(perspectiveFilter);
this.applyFilters();
return perspectiveCoords;
}
};
/**
* Creates an instance of fabric.Photo from its object representation
* #static
* #param {Object} object Object to create an instance from
* #param {Function} callback Callback to invoke when an image instance is created
*/
fabric.Photo.fromObject = function(_object, callback) {
const object = fabric.util.object.clone(_object);
object.layout = _object.layout;
fabric.util.loadImage(object.src, function(img, isError) {
if (isError) {
callback && callback(null, true);
return;
}
fabric.Photo.prototype._initFilters.call(object, object.filters, function(filters) {
object.filters = filters || [];
fabric.Photo.prototype._initFilters.call(object, [object.resizeFilter], function(resizeFilters) {
object.resizeFilter = resizeFilters[0];
fabric.util.enlivenObjects([object.clipPath], function(enlivedProps) {
object.clipPath = enlivedProps[0];
var image = new fabric.Photo(img, object);
callback(image, false);
});
});
});
}, null, object.crossOrigin || 'anonymous');
};
const canvas = new fabric.Canvas(document.getElementById('canvas'), {
backgroundColor: 'white',
enableRetinaScaling: true,
});
function resizeCanvas() {
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
}
resizeCanvas();
window.addEventListener('resize', () => resizeCanvas(), false);
const photo = new fabric.Photo('data:image/jpeg;base64,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', {
left: canvas.getWidth() / 2,
top: canvas.getHeight() / 2,
originX: 'center',
originY: 'center',
// this make it not work
angle:90
});
canvas.add(photo);
canvas.setActiveObject(photo);