Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@wix/image-kit
Advanced tools
Standard library for generating canonical URL's for optimally consuming images at Wix
Standard library for generating canonical URL's for optimally consuming images at Wix.
.webp
images where applicableimport { sdk } from '@wix/image-kit';
const img = new Image();
img.src = sdk.getScaleToFillImageUrl('some-image.jpg', 1200, 800, 640, 480, { quality: 90 });
You have 2 options:
You can install the package via npm/yarn
> npm install -s @wix/image-sdk
or:
> yarn add @wix/image-sdk
You can install the package via npm/yarn
> npm install -s @wix/image-kit --registry http://npm.dev.wixpress.com/
or:
> yarn add @wix/image-kit --registry http://npm.dev.wixpress.com/
Method | Description |
---|---|
getScaleToFitImageURL() | Scales the designated image to fit in the given target width and height while retaining the original proportions. |
getScaleToFillImageURL() | Scales the designated image with the exact given target width and height while retaining the original proportions. If the required proportions are different than the original, the image may be cropped to fill the provided width and height, so that only part of the original image might be visible. The position pointing to the place from which to crop the image, if needed, is set by default to the vertical and horizontal center of the image or set to the focalPoint x,y values if presented. |
getCropImageURL() | Crops the designated image based on the supplied coordinates, starting at the x, y pixel coordinates, along with the width and height options. The image might be scaled according to the target dimensions. |
getScaleToFillImageUrl(
relativeUrl,
sourceWidth,
sourceHeight,
targetWidth,
targetHeight,
options
)
name | description | type |
---|---|---|
relativeUrl | the original image uri | string |
sourceWidth | the original image width | number |
sourceHeight | the original image height | number |
targetWidth | target container width | number |
targetHeight | target container height | number |
options | additional image settings [optional] | object |
{
filters: {
blur: 15
},
unsharpMask: {
amount: 0.66,
radius: 1.0,
threshold: 0.01
},
name: 'hello kitty',
quality: 80,
upscaleMethod: 'classic',
watermark: '3856-9876-76890-xzxz',
isSEOBot: true,
autoEncode: true,
}
key | valid values | default | type |
---|---|---|---|
filters.blur | 0-100 | - | number (%) |
unsharpMask.amount | 0-10 | 0.66 | float |
unsharpMask.radius | 0.1-500 | 1.0 | float |
unsharpMask.amount | 0-255 | 0.01 | float |
name | any string | '' | string |
quality | 5-90 | 80 | number |
upscaleMethod | 'auto', 'classic', 'super' | 'auto' | string |
watermark | watermark manifest id | - | string |
isSEOBot | true or false | false | boolean |
autoEncode | true or false | true | boolean |
hasAnimation | true, false, undefined | false | boolean |
returns image url [string]
getScaleToFillImageUrl(
relativeUrl,
sourceWidth,
sourceHeight,
targetWidth,
targetHeight,
options
)
name | description | type |
---|---|---|
relativeUrl | the original image uri | string |
sourceWidth | the original image width | number |
sourceHeight | the original image height | number |
targetWidth | target container width | number |
targetHeight | target container height | number |
options | additional image settings [optional] | object |
{
filters: {
blur: 15
},
unsharpMask: {
amount: 0.66,
radius: 1.0,
threshold: 0.01
},
focalPoint: {
x: 50,
y: 50
},
name: 'hello kitty',
quality: 80,
upscaleMethod: 'classic'
watermark: '3856-9876-76890-xzxz',
isSEOBot: true,
autoEncode: true
}
key | valid values | default | type |
---|---|---|---|
filters.blur | 0-100 | - | number (%) |
unsharpMask.amount | 0-10 | 0.66 | float |
unsharpMask.radius | 0.1-500 | 1.0 | float |
unsharpMask.amount | 0-255 | 0.01 | float |
focalPoint.x | 0-100 | - | number (%) |
focalPoint.y | 0-100 | - | number (%) |
name | any string | '' | string |
quality | 5-90 | 80 | number |
upscaleMethod | 'auto', 'classic', 'super' | 'auto' | string |
watermark | watermark manifest id | - | string |
isSEOBot | true or false | false | boolean |
autoEncode | true or false | true | boolean |
hasAnimation | true, false, undefined | false | boolean |
returns image url [string]
getCropImageUrl(
relativeUrl,
sourceWidth,
sourceHeight,
cropX,
cropY,
cropWidth,
cropHeight,
targetWidth,
targetHeight,
options
)
name | description | type |
---|---|---|
relativeUrl | the original image uri | string |
sourceWidth | the original image width | number |
sourceHeight | the original image height | number |
cropX | the X pixel coordinate to start cropping from | number |
cropY | the Y pixel coordinate to start cropping from | number |
cropWidth | the width constraint | number |
cropHeight | the height constraint | number |
targetWidth | target container width | number |
targetHeight | target container height | number |
options | additional image settings [optional] | object |
hasAnimation | true, false, undefined | false |
{
filters: {
blur: 15
},
unsharpMask: {
amount: 0.66,
radius: 1.0,
threshold: 0.01
},
focalPoint: {
x: 50,
y: 50
},
name: 'hello kitty',
quality: 80,
upscaleMethod: 'classic',
watermark: '3856-9876-76890-xzxz',
isSEOBot: true,
autoncode: true
}
key | valid values | default | type |
---|---|---|---|
filters.blur | 0-100 | - | number (%) |
unsharpMask.amount | 0-10 | 0.66 | float |
unsharpMask.radius | 0.1-500 | 1.0 | float |
unsharpMask.amount | 0-255 | 0.01 | float |
name | any string | '' | string |
quality | 5-90 | 80 | number |
upscaleMethod | 'auto', 'classic', 'super' | 'auto' | string |
watermark | watermark manifest id | - | string |
isSEOBot | true or false | false | boolean |
returns image url [string]
FAQs
Standard library for generating canonical URL's for optimally consuming images at Wix
The npm package @wix/image-kit receives a total of 3,519 weekly downloads. As such, @wix/image-kit popularity was classified as popular.
We found that @wix/image-kit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.