$("#putData").val("");
$("#putData").val(data);

这里的bug可以在 textarea 中设置值前先清空一次=。=

------------------------------------------------

cropper.setData()需要参数是json对象

感觉使用这两个方法来转换json字符串和对象比较方便

JSON.stringify()

JSON.parse()

兼容性会比 toSource() 好一点 toSource()只有火狐等部分浏览器支持

//获取相关数据
        var data;
        //getData-button 裁剪框相对于图片的数据
        $("#getData-button").on("click", function() {
            data = JSON.stringify(cropper.getData());
            $("#putData").val("");
            $("#putData").val(data);
        });
        //setData-button 裁剪框相对于图片的数据
        $("#setData-button").on("click", function() {
            data = $("#putData").val();
            cropper.setData(JSON.parse(data));
        });

此处setData可以配合getData做还原画面使用，当切图到一定程度，感觉还不错的时候，可以getData，会将当前图片数据存到页面textarea中，然后经过一波操作，如果不如意，可以点击setData，把图片按刚才存的数据设置，后续的get和set都同理~~  =。=

cropper.js头像修改成圆形框的方法

1. cropper.js

在cropper.js中找到 getCroppedCanvas方法 在context.drawImage.apply上添加

var circle = { 
x: canvasWidth / 2, 
y: canvasHeight / 2, 
r: canvasWidth / 2 
}; 

context.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false); 
context.clip();

2.cropper.css

.cropper-face 添加border-radius: 100%; 
.cropper-view-box 删除outline outline-color 
添加 border: 2px solid #39f; 
border-color: rgba(51, 153, 255, .75); 
border-radius: 100%;

转自：https://www.cnblogs.com/beizhi666/p/10935518.html

关于jsp页面json对象和json字符串的相互转换

1.字符串转化JSON对象

 JSON.parse(str)

2.JSON对象转换JSON字符串

JSON.stringify(json object)

如果非火狐浏览器，不支持 toSource()方法，可以使用 

JSON.stringify(cropper.getData())将对象转换成json字符串

测试移动的时候，推荐使用console.log()，观察控制台输出，alert()可能会造成无限弹窗，最后只能任务管理器强制关闭浏览器=。=