extjs做截图功能，加上jcrop插件下载后，背景是黑色，浏览出不来图片，不加插件，可以出来图片

来源：蜘蛛抓取(WebSpider) 时间：2015-12-09 00:54 标签： extjs插件
Jquery中的Jcrop插件在图片剪裁中的使用 -
- ITeye技术网站
博客分类：
通过Jcrop可以很好的实现图片剪裁功能。
一.引用的JS和css
&script type="text/javascript" src="../jquery.min.js"&&/script&&script type="text/javascript" src="../jcrop/js/jquery.Jcrop.js"&&/script&&link rel="stylesheet" href="../jcrop/css/jquery.Jcrop.css" type="text/css"/&&link rel="stylesheet" href="../css/imgcut.css" type="text/css" /&
二.JSP页面中的html元素
编辑图片和预览图片
&div class="image-container" style="text-align:width:&%=maxEditWidth%&
height:&%=maxEditHeight%&overflow:"&
&img id="target" src="cardGetImgFroTem.action?id=&ww:property value='id'/&"
onload="setWandH(&%=maxEditWidth%&,&%=maxEditHeight%&)" /&
&div class="preview-container hide" style="width:&%=maxCutWidth%&
height:&%=maxCutHeight%&overflow:"&
&img id="preview" src="cardGetImgFroTem.action?id=&ww:property value='id'/&"
onload="$('#preview').width(this.width);$('#preview').height(this.height)"/&
三.页面中的js控制代码
/** 页面加载完即处理：
1.确定按钮绑定单击事件
2.绑定页面事件：离开即删除临时文件
3.初始化截图框
$(function(){
$('.btn-submit:first').click(function(){
saveImagecut();
/** 离开页面时删除临时文件 **/
$(window).unload(function(){
var id = "&ww:property value='id'/&";
deleteTempFile(id);
/** x,y,w,h设置为0初始化未选中 **/
initJcrop();
/** 初始化截图框 **/
function initJcrop(){
if($('#target').attr('readyState') == 'uninitialized'){
if(initCount++ & 5){
alert('照片编辑初始化失败');
setTimeout("initJcrop()", 500);
$('#target').Jcrop({
onChange : updatePreview,
onSelect: updatePreview,
aspectRatio: &%=aspectRatio%&
},function(){
doesInit =
jcrop.animateTo([52,4,264,286]);
/** 截图框大小改变时触发事件 **/
function updatePreview(coords) {
// 储存左上点坐标和截图框宽高
x = parseInt(coords.x);
y = parseInt(coords.y);
w = parseInt(coords.w);
h = parseInt(coords.h);
// 将缩略图显示出来
$('.preview-container').show();
var imgWidth = $('#target').width();
var imgHeight = $('#target').height();
var rx = 0,ry = 0;
var width = &%=maxCutWidth%&;
var height = width / &%=aspectRatio%&;
if(coords.w != 0){
rx = width / coords.w;
if(coords.h != 0){
ry = height / coords.h;
$('#preview').css({
width: Math.round(rx * imgWidth) + 'px',
height: Math.round(ry * imgHeight) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
/** 同步删除临时文件 **/
function deleteTempFile(id) {
var result =
async : false,
url : 'cardDeleTemFold.action?id=' + id + '&r=' + new Date().getTime(),
success : function(data){
// alert("删除临时文件成功");
var json = $.parseJSON(data);
if(json.msg == 'success'){
console.error(json.msg);
}catch(e) {};
/** 保存截图[处理大小存入数据库] **/
function saveImagecut(){
var zfId ='&ww:property value="zfId"/&';
var id = "&ww:property value='id'/&";
var data = new Object();
data.x = x == null ? 0 :
data.y = y == null ? 0 :
data.w = w == null ? 0 :
data.h = h == null ? 0 :
var s = data.w*data.h;
alert("请先裁剪照片，获取预览头像！");
// 将已裁剪照片存进已裁剪表后刷新对应父页面的iframe框更新头像
url : 'cardSaveImgToDbtb.action?id=' + id + '&zfId=' + zfId + '&r=' + new Date().getTime(),
data:data,
success : function(data){
var json = $.parseJSON(data);
if(json.msg == 'success'){
var ifm = window.opener.document.getElementById("cardListIframe_&ww:property value='zfId'/&");
var url = ifm.
$("#saveButton").attr("style","display:");
$("#cancelButton").attr("style","display:");
jcrop.disable();
alert(json.msg);
$('.preview-container').hide();
// window.close();
四.java代码获取、处理、显示image图片流
1.从数据库中获取图片byte[]，保存在临时文件夹中。JSP的编辑图片、预览图片底图都是从临时文件夹获取而来。[这也是任何离开处理图片页面的操作都要严格执行删除文件的原因。清理脚手架]
2.从本页面获取剪裁的图片坐标传入处理图片的action。
3.在处理action中，结合编辑图片大小与获取的坐标值，对应成比例的截取临时文件夹中的图片。将新图片保存至数据库中。
4.在显示实际的已裁剪好的页面中，数据库取图片流显示的方式获取已裁剪之后的图片。
五。易错点
1.在图片的处理中容易将某个数据输入输出流忘记关闭，造成内存负载过重；
2.在样式中，我此前漏掉了一个严重的细节。jsp页面报js错误："auto"未定义。翻遍了页面中的js代码和所引入的.js文件，一无所获。事实证明，是一个.css文件中的auto没有完全注释掉。这里的两个启示是.css文件不能用//来注释。另外一点告诉我们，既然通过js代码能够极大的改观一向由.css文件控制的页面样式风格，那么css自己的不规范也能导致非常严重起初又毫不起眼的js错误。
3.截图框在ie6以上非常清晰漂亮，但是在ie6下边框带有几个累赘不整齐的“木头架子”非常丑陋，没有js错，就是丑。对此很无语，如果各位看到并且已经解决过请一定赐教。
浏览: 1927 次
来自: 上海jquery-Jcrop实现图片裁剪截图上传和保存 - 下载频道
- CSDN.NET
&&&&jquery-Jcrop实现图片裁剪截图上传和保存
jquery-Jcrop实现图片裁剪截图上传和保存
jquery-Jcrop实现图片裁剪截图上传和保存，很好用，做制作头像是个很好的工具，比图片压缩好多了
若举报审核通过，可奖励20下载分
被举报人：
xingkong110
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
您可能还需要
开发技术下载排行

我要回帖

更多关于 extjs插件 的文章

 

随机推荐