wix-cropper-app
Cropper js to work with wix site using corvid
Demo https://salman2301.github.io/wix-cropper-app/
how to embed in wix site
- Add "Embed html" in wix page
- add this url https://salman2301.github.io/wix-cropper-app/
- Communicate with the app using window message method wix code document link
Post message allowed methods
1. to initialize setting of the cropper
send a message to the HTML with any or all the default setting.
let msg = {
initSetting: true, // required, to change the app setting
fillColor: "#000", // background color outside the image region
imageHeight: 520, // output image height
imageWidth : 240, // output image width
aspectRatio : 5/7 // aspect ratio of the crop
noAspectRatio: false // allow no aspect ratio
}
window.postmessage(msg);This will be the default setting of the app
{
fillColor: "#000",
imageHeight: 520,
imageWidth : 240,
aspectRatio : 5/7,
noAspectRatio: false
}2. to update Image URL
send the message to HTML if it's embed in wix site.
let msg = {
toUpdateImageURL: true, // requre to change the image
updateImageURL: "<image URL here>" // require image URL
}
window.postmessage(msg);On message
On message event trigger when the app is ready to or when the upload button is clicked, it will send the cropper image in Array buffer data type
on ready below message will be sent to parent component, in our case it's the wix site.
{
isCropper: true, // default
ready: true
}when the image is uploaded, below message with the cropped image in Array buffer will be sent
{
isCropper: true,// default
imageData: ["<image buffer>"]
}Note
App is still in developing stage