速抠图 koutu.luhui.net

商家接入

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

1.开放链接方式

2.源码私有化部署方式

已接入商家

速写板

开放链接

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

1.不存在跨域问题,无缝对接

2.资源保护：图片裁剪操作及图片数据传递均在用户本地设备完成，不会上传至速抠图服务器。

示例（Demo）

裁剪并回传imgData 裁剪并下载 

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

地址： https://koutu.luhui.net?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://koutu.luhui.net");
}

//调用函数：通过图片地址调用
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://koutu.luhui.net");
     }
}