JavaScript插件 图片裁剪photoClip

JavaScript插件图片裁剪 photoClip

页面裁剪图片得到 base64 格式的图片数据，然后把这个数据通过 ajax 上传给服务器，服务器将 base64 图片数据解析成图片并且保存到服务器上面，并且返回图片在服务器上的地址。

1、截图

2、代码

源码：https://download.csdn.net/download/weiguang102/85117408

DOCTYPE html>








裁剪图片演示-带初始值


#clip {
	width: 100%;
	height: 400px;
}







    上传头像
    裁剪











$(function() {
    var $clip = $("#clip");
    var $file = $("#file");
    $("#toggle-file").click(function() {
        $file.trigger("click");
    });

    $clip.photoClip({
        width: 400,
        height: 300,
        fileMinSize: 20,
        file: $file,
        defaultImg: "./img/4.jpg",
        ok: "#clipBtn",
        loadStart: function() {
            console.log("照片读取中");
        },
        loadProgress: function(progress) {
            console.log(progress);
        },
        loadError: function() {
            console.log("图片加载失败");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        imgSizeMin: function(kbs) {
            console.log(kbs, "上传图片过小");
        },
        clipFinish: function(dataURL) {
            document.getElementById("img-view").src = dataURL;

            $.post("http://tt.cc/testData/A.php", { dataURL: dataURL},
                function(data){
					alert("Data Loaded: " + data);
                });
            console.log(dataURL);
        }
    });
})

后台接收并处理图片代码