测试移动的时候,推荐使用console.log(),观察控制台输出,alert()可能会造成无限弹窗,最后只能任务管理器强制关闭浏览器=。=
测试移动的时候,推荐使用console.log(),观察控制台输出,alert()可能会造成无限弹窗,最后只能任务管理器强制关闭浏览器=。=
关于jsp页面json对象和json字符串的相互转换
1.字符串转化JSON对象
JSON.parse(str)
2.JSON对象转换JSON字符串
JSON.stringify(json object)
如果非火狐浏览器,不支持 toSource()方法,可以使用
JSON.stringify(cropper.getData())将对象转换成json字符串
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
此处setData可以配合getData做还原画面使用,当切图到一定程度,感觉还不错的时候,可以getData,会将当前图片数据存到页面textarea中,然后经过一波操作,如果不如意,可以点击setData,把图片按刚才存的数据设置,后续的get和set都同理~~ =。=
$("#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));
});