@cloudinary/url-gen
Version:
You are invited to influence our new SDK [Click here to view github discussion](https://github.com/cloudinary/js-url-gen/discussions/602) =========================
287 lines (281 loc) • 10 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var CutByImage = require('../CutByImage-987f54d9.cjs');
var DistortArc = require('../DistortArc-6b15df12.cjs');
var Shear = require('../Shear-cd3bbfb1.cjs');
var Distort = require('../Distort-3f6dd199.cjs');
var Action = require('../Action-0ed405c1.cjs');
var createSourceFromModel = require('../createSourceFromModel-e4533c35.cjs');
var TrimAction = require('../TrimAction-35390b0c.cjs');
require('../Qualifier-6633a22f.cjs');
require('../QualifierValue-e770d619.cjs');
require('../QualifierModel-0923d819.cjs');
require('../unsupportedError-74070138.cjs');
require('../FlagQualifier-7b069f22.cjs');
require('../ImageSource-2890c2e5.cjs');
require('../BaseSource-d2277592.cjs');
require('../FetchSource-b49b90bf.cjs');
require('../FormatQualifier-ffbb8eb3.cjs');
require('../base64Encode-08c19f63.cjs');
require('../VideoSource-c3c76a47.cjs');
require('../TextSource-e553076e.cjs');
require('../BaseTextSource-bc602fae.cjs');
require('../textStyle-563429b1.cjs');
require('../fontWeight-26f14240.cjs');
require('../fontStyle-26a61de5.cjs');
require('../textDecoration-97f36d3b.cjs');
require('../textStroke-36d008fd.cjs');
require('../prepareColor-c03e99eb.cjs');
require('../AudioSource-10f49548.cjs');
/**
* @description Displaces the pixels in an image according to the color channels of the pixels in another specified image.
* @extends SDK.Action
* @memberOf Actions.Reshape
* @see Visit {@link Actions.Reshape| Reshape} for examples
*/
class DisplaceAction extends Action.Action {
constructor(source) {
super();
this.source = source;
this._actionModel = {
actionType: 'displace',
source: source.toJson()
};
}
/**
* @description Sets the x coordinate for displacement.
* @param {string | number} x The x coordinate value (between -999 and 999)
* @return {this}
*/
x(x) {
this._x = x;
this._actionModel.x = x;
return this;
}
/**
* @description Sets the y coordinate for displacement.
* @param {string | number} y The y coordinate value (between -999 and 999)
* @return {this}
*/
y(y) {
this._y = y;
this._actionModel.y = y;
return this;
}
/**
* @description Sets the position using Position qualifier (alternative to x/y methods).
* @param {Position} position The position qualifier
* @return {this}
*/
position(position) {
// Extract x and y from position and set them in the model
const positionJson = position.toJson();
if (positionJson.offsetX !== undefined) {
this._x = positionJson.offsetX;
this._actionModel.x = positionJson.offsetX;
}
if (positionJson.offsetY !== undefined) {
this._y = positionJson.offsetY;
this._actionModel.y = positionJson.offsetY;
}
return this;
}
static fromJson(actionModel, transformationFromJson) {
const { source, x, y } = actionModel;
const sourceInstance = createSourceFromModel.createSourceFromModel(source, transformationFromJson);
const result = new DisplaceAction(sourceInstance);
if (x !== undefined) {
result.x(x);
}
if (y !== undefined) {
result.y(y);
}
return result;
}
toString() {
const displaceParams = [
'e_displace',
'fl_layer_apply'
];
if (this._x !== undefined) {
displaceParams.push(`x_${this._x}`);
}
if (this._y !== undefined) {
displaceParams.push(`y_${this._y}`);
}
const layerParts = [
this.source.getOpenSourceString('l'),
this.source.getTransformation() && this.source.getTransformation().toString(),
displaceParams.join(',')
].filter((a) => a);
return layerParts.join('/');
}
}
/**
* @summary action
* @memberOf Actions
* @namespace Reshape
* @description Adjusts the shape of the delivered image. </br>
* <b>Learn more:</b> {@link https://cloudinary.com/documentation/effects_and_artistic_enhancements#distort|Shape changes and distortion effects}
* @example
* // Expand every function separately to see its own example
*/
/**
* @summary action
* @description Trims pixels according to the transparency levels of a given overlay image.
* Wherever the overlay image is transparent, the original is shown, and wherever the overlay is opaque, the resulting image is transparent.
* @param {Qualifiers.Source.ImageSource} imageSource
* @memberOf Actions.Reshape
* @return {Actions.Reshape.CutByImage}
* @example
* <caption> <h4>Cut an image by using another image(Gravity)</h4> </caption>
* import {Cloudinary, Transformation} from "@cloudinary/url-gen";
*
* const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
* const img = yourCldInstance.image('woman');
*
* import {cutByImage} from '@cloudinary/url-gen/actions/reshape';
* import {image} from "@cloudinary/url-gen/qualifiers/source";
*
* img.reshape(
* cutByImage(
* image('sourceImage').transformation(new Transformation())
* ))
* img.toString()
*/
function cutByImage(imageSource) {
return new CutByImage.CutByImage(imageSource);
}
/**
* @summary action
* @description Distorts the image to an arc shape.
*
* <b>Learn more:</b> {@link https://cloudinary.com/documentation/transformation_reference#e_distort|Distorting images}</br>
* <b>Learn more:</b> {@link https://cloudinary.com/documentation/effects_and_artistic_enhancements#distort|Distortion effects}
*
* @param {number} degrees The degrees to arc the image
* @memberOf Actions.Reshape
* @return {Actions.Reshape.DistortArcAction}
* @example
* <caption> <h4>Distort arc</h4> </caption>
* import {Cloudinary, Transformation} from "@cloudinary/url-gen";
*
* const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
* const img = yourCldInstance.image('woman');
*
* import {distortArc} from '@cloudinary/url-gen/actions/reshape';
*
* img.reshape(
* distortArc(200)
* )
* img.toString()
*/
function distortArc(degrees) {
return new DistortArc.DistortArcAction(degrees);
}
/**
* @summary action
* @description Distorts the image to a new shape by adjusting its corners to achieve perception warping.
* Specify four corner coordinates, representing the new coordinates for each of the image's four corners,
* in clockwise order from the top-left corner.
*
* <b>Learn more:</b> {@link https://cloudinary.com/documentation/transformation_reference#e_distort|Distorting images}
*
* @param {number[]} coordinates - Four x/y pairs representing the new image corners
* @memberOf Actions.Reshape
* @return {Actions.Reshape.DistortAction}
* @example
* <caption> <h4>Distorting an image</h4> </caption>
* import {Cloudinary, Transformation} from "@cloudinary/url-gen";
*
* const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
* const img = yourCldInstance.image('woman');
*
* import {distort} from '@cloudinary/url-gen/actions/reshape';
*
* img.reshape(
* distort([100, 100, 100, 200, 200, 200, 200, 100])
* )
* img.toString()
*/
function distort(coordinates) {
return new Distort.DistortAction(coordinates);
}
/**
* @summary action
* @description Skews the image according to the two specified values in degrees.
* @param {number} x Skews the image according to the two specified values in degrees. (X and Y)
* @param {number} y Skews the image according to the two specified values in degrees. (X and Y)
* @memberOf Actions.Reshape
* @return {Actions.Reshape.ShearAction}
* @example
* <caption> <h4>Shearing an image</h4> </caption>
* import {Cloudinary, Transformation} from "@cloudinary/url-gen";
*
* const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
* const img = yourCldInstance.image('woman');
*
* import {shear} from '@cloudinary/url-gen/actions/reshape';
*
* img.reshape(
* shear(50, 0)
* )
* img.toString()
*/
function shear(x, y) {
return new Shear.ShearAction(x, y);
}
/**
* @summary action
* @description Displaces the pixels in an image according to the color channels of the pixels in another specified image.
* @param {BaseSource} source The source for displacement
* @memberOf Actions.Reshape
* @return {Actions.Reshape.DisplaceAction}
* @example
* <caption> <h4>Displacing an image</h4> </caption>
* import {Cloudinary, Transformation} from "@cloudinary/url-gen";
*
* const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
* const img = yourCldInstance.image('woman');
*
* import {displace} from '@cloudinary/url-gen/actions/reshape';
* import {image} from '@cloudinary/url-gen/qualifiers/source';
*
* img.reshape(
* displace(image('radialize')).x(100).y(50)
* )
* img.toString()
*/
function displace(source) {
return new DisplaceAction(source);
}
/**
* @summary action
* @description Removes the edges of the image based on the color of the corner pixels.
* Specify a color other than the color of the corner pixels using the colorOverride() method
* @memberOf Actions.Reshape
* @return {Actions.Reshape.TrimAction}
* @example
* <caption> <h4>Trimming an image</h4> </caption>
* import {Cloudinary, Transformation} from "@cloudinary/url-gen";
*
* const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
* const img = yourCldInstance.image('woman');
*
* import {trim} from '@cloudinary/url-gen/actions/reshape';
*
* img.reshape(
* trim().colorOverride('blue').colorSimilarity(15)
* )
* img.toString()
*/
function trim() {
return new TrimAction.TrimAction();
}
const Reshape = { cutByImage, distortArc, distort, shear, displace, trim };
exports.Reshape = Reshape;
exports.cutByImage = cutByImage;
exports.distort = distort;
exports.distortArc = distortArc;
exports.shear = shear;
exports.trim = trim;