CropImageTool cropimagetool.com

crop image tool,cropimagetool.com provide free online cropping tools and online ps cropping software,no need to download photoshop software to achieve online cropping and image processing,support smart croping, pen cropping, matrix cropping, drag cropping, eraser cropping, pattern cropping, image compression, image format conversion, hd image processing and other functions.

crop image, crop photo, photo crop, crop image online, image cropper, cropping tool,crop image tool

Crop Image

Service Join

In order to facilitate merchants to quickly access online matting services, matting provides the following two access methods.

1.Open link mode

2.Source privatization deployment

Open link

The Iframe is embedded in the image matting address to be clipped and sent back to imageData or downloaded directly

1.There is no cross-domain problem, seamless docking
2.Resource protection: image clipping and image data transmission are completed on the user's local device and will not be uploaded to the image matting server.

Demo

Crop & Callback Crop & DownLoad 


Principle: image matting popover is an iframe, and the popover page calls back the parent page to pass imageData through this function. window.parent.postMessage({ src: imgData }, '*')

Url: https://www.cropimagetool.com?is_callback={isCallBack}

Explain

{isCallBack} Required, declare whether to return clipped imageData,value (boolean),true or false, true: callback imageData,false:download image

The current page declares the call and callback functions:

//Declare the callback function( only is_callback=true the callback function must be declared,false,you don't have to declare):After successfully cropping, click the save image button to return the imageData function
window.addEventListener('message',function(e){
    if (undefined != e.data.src && null != e.data.src) {
       //e.data.src is imageData(data:image/png;base64)
       console.log(e.data.src);
    }
});
            
//Callback Function:Called by imgData
function initImgCutPanelByImgData(imgData) {
     //Get image cropping popover iframe object, and deliver imageData
     //Businesses should $(".layui-layer-content").find("iframe")[0] replace the access method with your own
     $(".layui-layer-content").find("iframe")[0].contentWindow.postMessage({src: imgData}, "https://www.cropimagetool.com");
}

//Call Function:Called by picture address
function initImgCutPanelByImgSrc(imgSrc) {
     var img = new Image();
     img.src = imgSrc;
     img.crossOrigin = 'anonymous';
     img.onload = function () {
         var canvas = document.createElement("canvas");
         canvas.width = img.width;
         canvas.height = img.height;
         canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
         //Get image cropping popover iframe object, and deliver imageData
         //Businesses should $(".layui-layer-content").find("iframe")[0] replace the access method with your own
         $(".layui-layer-content").find("iframe")[0].contentWindow.postMessage({src: canvas.toDataURL('image/' + name.indexOf("png") == -1 ? "jpeg" : "png")}, "https://www.cropimagetool.com");
     }
}