`
rox
  • 浏览: 43819 次
  • 性别: Icon_minigender_1
  • 来自: 海口
社区版块
存档分类
最新评论

Jcrop动态加载图片

 
阅读更多

Jcrop对ajax请求加载的图片,在各浏览器下表现不一。

有的图片不更新,有的图片加载大小是上张图片的,被挤压了,预览区就对不上了。

解决方法其实很简单,删除重建:

 

$('#cropcontainer').empty();
$('#cropcontainer').append("<img id='cropbox'/>");
$('#cropbox').attr('src', imageUrl);
$('#preview').attr('src', imageUrl);

 

cropbox是原图ID,

preview是预览图ID。

分享到:
评论
2 楼 537581603 2012-04-09  
非常感谢啊~~~一直纠结这个问题,第一次上传之后 那个图片的大小就固定了,想了很多办法都没解决,终于解决了~~
1 楼 storm_code 2011-10-10  
请问你的这个$('#cropcontainer').empty();中的cropcontainer是指?

相关推荐

    jcrop图片裁剪demo

    当Jcrop被加载到页面上时,它会查找指定的图像元素,并在其上添加可交互的层,使用户可以通过鼠标进行拖动和缩放操作。选区的坐标和尺寸信息会被实时更新并存储在JavaScript对象中,开发者可以通过API获取这些数据,...

    jcrop实现剪切上传图片

    初始化后,Jcrop会自动为选定的图像添加可拖动的选区。用户可以自由调整选区大小和位置。Jcrop提供了多种配置选项和事件处理,可以根据需求进行定制。 例如,你可以设置初始选区的宽高比例,或者禁用某些操作: ``...

    jcrop裁剪图片

    《Jcrop:高效实用的图片裁剪工具》 在网页设计和开发中,图片裁剪功能经常被用于用户上传头像、编辑图片等场景。Jcrop是一款基于jQuery的开源图片裁剪插件,它提供了简单易用的API,使得开发者能够轻松地在网页中...

    jquery-Jcrop实现图片裁剪截图上传和保存

    2. **多图裁剪**:可以通过动态生成多个Jcrop实例实现同时对多张图片进行裁剪。 3. **色彩选择器**:Jcrop可以配置颜色选择器,让用户自定义背景或边框颜色。 4. **响应式设计**:Jcrop可以与Bootstrap或其他响应式...

    jcrop裁剪上传图片

    - **动态选取**:jcrop允许用户在图片上自由拖动选择框,选择需要裁剪的区域。 - **比例锁定**:可以设置固定的比例,确保裁剪出的图片保持原始比例。 - **预览功能**:在裁剪的同时,提供实时预览,用户可以即时...

    Jcrop插件对图片进行裁剪示例

    // Jcrop API可用后,可在此添加更多交互逻辑 }); ``` 当用户完成选择后,Jcrop会提供选定区域的坐标(top, left, width, height)。这些坐标需要通过Ajax提交到服务器。在jQuery中,这可能看起来像这样: ```...

    jquery+Jcrop+servlet图片上传裁剪选择保存实例

    为了确保用户体验,前端还应考虑错误处理,例如处理文件类型错误、图片加载失败等情况。同时,后端也需要对文件上传进行安全检查,防止恶意文件的上传。 总的来说,"jquery+Jcrop+servlet图片上传裁剪选择保存实例...

    Jcrop官方的图片裁剪jQuery插件

    1. **直观的用户界面**:Jcrop通过添加可拖动的选区框到图片上,使得用户能够直观地选择他们感兴趣的区域。 2. **实时预览**:选区的变化可以实时反映到预览区域,方便用户调整。 3. **像素级精度**:Jcrop支持精确...

    jCrop jquery 裁剪图片 加 上传 php代码

    - 可以添加图片预览功能,让用户在裁剪前看到效果。 - 添加尺寸限制,防止裁剪过大导致服务器资源消耗过多。 - 可以考虑使用 Web Workers 来优化前端的裁剪操作,提高用户体验。 这个项目为开发者提供了一个基本...

    Jcrop图片预览裁剪-图片预览裁剪

    Jcrop是一款广泛应用于Web开发中的JavaScript库,专门用于实现图片的预览和裁剪功能。它支持Internet Explorer 8及更高版本以及所有主流浏览器,包括Chrome、Firefox、Safari和Opera,提供了良好的跨平台和跨浏览器...

    Jcrop&JQ鼠标放上图片放大效果

    1. **图片加载**:首先,你需要在HTML中加载图片,并为其分配一个ID,以便通过jQuery选择器找到它。 2. **jQuery绑定事件**:使用jQuery的`hover()`函数监听鼠标进入和离开图片的事件。当鼠标悬停在图片上时,执行...

    jsp+jquery(jcrop)实现的图片预览剪切上传

    `jQuery`监听文件输入元素的改变事件,当用户选择图片后,`jCrop`会自动对图片进行预加载并显示在页面上。用户可以通过鼠标操作在图片上划定需要剪切的部分,这个过程可以在上传前实时预览。一旦用户满意,点击上传...

    Jcrop图片上传-预览-剪切效果展示

    2. **创建图片元素**:在HTML中创建一个`&lt;img&gt;`元素,设置其`src`属性为待上传图片的URL,或者使用`data-url`属性存放图片URL,等图片加载完成后动态设置`src`。 3. **初始化Jcrop**:使用jQuery选择器找到图片元素...

    好用的JS图片裁剪工具——jquery.Jcrop-0.9.8 (官方修正版)

    1. **图片加载**: 确保图片在进行裁剪操作前已经完全加载,否则可能导致裁剪区域选择异常。 2. **事件监听**: 通过Jcrop的事件监听机制,可以捕捉到用户选择裁剪区域的变更,从而更新预览或者执行其他操作。 3. **...

    thinkphp +jquery +Jcrop+ajaxfileupload上传图片并裁剪保存到数据库

    在开发Web应用时,我们经常需要处理用户上传的图片,并且有时还需要进行裁剪以满足特定的尺寸要求。本教程将详细介绍如何使用...在实际项目中,可以根据需求进行功能调整和优化,例如添加图片预览、多图上传等功能。

    用jcrop裁剪图片

    Jcrop是基于jQuery的一个插件,它的主要任务是为图片添加可拖动的选区,用户可以通过移动和调整选区来确定裁剪区域。在选区确定后,开发者可以获取选区的坐标和比例信息,从而在服务器端或客户端进行实际的图片裁剪...

    jcrop做一个上传头像

    - 初始化Jcrop:加载图片后,使用Jcrop API绑定到图片元素,设置裁剪的参数,如允许的裁剪比例、最小尺寸等。 - 监听裁剪事件:当用户完成裁剪后,Jcrop会暴露裁剪的坐标和比例,可以通过事件监听器获取这些信息。...

    移动端图片上传和裁剪-Jcrop实现

    4. **Jcrop初始化**:在图片加载完成后,使用Jcrop初始化方法设置裁剪参数,例如允许的最小和最大裁剪尺寸、初始裁剪框位置等。 5. **裁剪操作**:用户在预览图上拖动和缩放裁剪框,Jcrop会实时更新裁剪坐标和比例。...

    Jcrop图片裁剪必须的JS文件

    可以通过监听窗口大小改变事件来动态调整Jcrop的配置。 7. **图像预览**:在用户选择裁剪区域后,可以实时显示裁剪后的预览图,这需要用到canvas或者CSS背景定位技术。 8. **保存裁剪结果**:Jcrop本身并不处理...

    jQuery图片裁剪插件Jcrop.js

    1. **引入jQuery和Jcrop.js**:在HTML文件中添加jQuery库和Jcrop.js的脚本链接,确保它们在页面加载时可用。 2. **初始化Jcrop**:通过JavaScript代码选择要裁剪的图片元素,并调用Jcrop的初始化方法,设置裁剪参数...

Global site tag (gtag.js) - Google Analytics