croppic + thinkphp 实现图片的上传和裁剪

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/heysteria/article/details/49722245

初始化

最简单的实现。请注意您必须提供该容器的宽度和高度。

JS

var cropperHeader = new Crop('yourId');

HTML

<div id="yourId"></div>

CSS

#cropContainerHeader {
    width: 200px;
    height: 150px;
    position:relative; /* or fixed or absolute */
}

上载 URL

您的 img 上载处理文件的路径。

JS

var cropperHeader = new Crop('yourId', cropperOptions);
    var cropperOptions = {
        uploadUrl:'path_to_your_image_proccessing_file.php'
}

您将收到通过 AJAX POST 方法的图像文件作为多部分/格式数据 ；

（请注意 ajax 仅限于同一域请求）

后保存的图像成功，你必须返回以下 json。

（图像宽度和高度所需的限制最大缩放级别，所以图像不模糊。

{
    "status":"success",
    "url":"path/img.jpg",
    "width":originalImgWidth,
    "height":originalImgHeight
}

错误响应的情况下

{
    "status":"error",
    "message":"your error message text"
}

上传数据

您想要发送给您的图像上传处理文件的附加数据

JS

var cropperHeader = new Crop('yourId', cropperOptions);
var cropperOptions = {
    uploadUrl: 'path_to_your_image_proccessing_file.php',
    uploadData: {
        "dummyData": 1,
        "dummyData2": "text"
    }
}