速抠图 sukoutu.com

速抠图 sukoutu.com提供免费在线抠图工具和在线ps抠图软件,无需下载 Photoshop软件即可实现在线抠图及图片处理,支持智能抠图、钢笔抠图、矩阵抠图、拖选抠图、橡皮擦图、图案抠图、图片压缩、图片格式转换、高清图片处理等功能。

抠图,ps抠图,抠图软件,抠图网站,图片压缩,在线抠图,智能抠图,图片格式转换,钢笔抠图,抠图工具,速抠图

开始抠图

商家接入

为方便商家快速接入在线抠图服务,速抠图 提供了如下两种接入方式

1.开放链接方式

2.源码私有化部署方式

开放链接

通过弹窗(Iframe)嵌入速抠图地址进行裁剪并回传imageData或直接下载

1.不存在跨域问题,无缝对接
2.资源保护:图片裁剪操作及图片数据传递均在用户本地设备完成,不会上传至速抠图服务器。

示例(Demo)

裁剪并回传imgData 裁剪并下载 


原理:抠图弹窗为iframe,弹窗页面通过该函数跨域回调父页面传imageData。 window.parent.postMessage({ src: imgData }, '*')

地址: https://www.sukoutu.com?is_callback={isCallBack}

说明

{isCallBack} 必填,声明是否回传裁剪图片imageData,值为(boolean)布尔类型,true或false,true:回传裁剪图片imageData数据;false:直接下载图片

当前页面声明调用和回调函数:

//声明回调函数(仅is_callback为true时必须声明回调函数,为false则不必声明):抠图成功后,点击保存图片按钮回传imageData函数
window.addEventListener('message',function(e){
    if (undefined != e.data.src && null != e.data.src) {
       //e.data.src为抠图的imageData(data:image/png;base64)
       console.log(e.data.src);
    }
});
            
//调用函数:通过图片imageData调用
function initImgCutPanelByImgData(imgData) {
     //获取图片裁剪弹窗Iframe对象,并传递imageData
     //商家需将$(".layui-layer-content").find("iframe")[0]获取方式替换为自己的
     $(".layui-layer-content").find("iframe")[0].contentWindow.postMessage({src: imgData}, "https://www.sukoutu.com");
}

//调用函数:通过图片地址调用
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);
         //获取图片裁剪弹窗Iframe对象,并传递imageData
         //商家需将$(".layui-layer-content").find("iframe")[0]获取方式替换为自己的
         $(".layui-layer-content").find("iframe")[0].contentWindow.postMessage({src: canvas.toDataURL('image/' + name.indexOf("png") == -1 ? "jpeg" : "png")}, "https://www.sukoutu.com");
     }
}