/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
Js图片裁切框专用插件是一款准们针对Js图片的图片处理工具,该文件体积仅有202KB,别看Js图片裁切框专用插件体积小功能却十分强大,裁切框可以随意用鼠标拖动,输入保存的名称,可以点击那个保存按钮进行保存。
【Js图片裁切框专用插件三种方式的裁切框使用演示】:
Demo1:随意拖动位置和大小
Demo2:随意拖动位置,锁定尺寸大小.
Demo3:随意拖动位置,保持尺寸宽高比
【Js图片裁切框专用插件代码展示】:
jQuery+CSS实现Ajax图片裁切功能 展示 crop.js源代码
返回 下载jQuery+CSS实现Ajax图片裁切功能: 单独下载crop.js源代码 - 下载整个jQuery+CSS实现Ajax图片裁切功能源代码 - 类型:.js文件
1.$(function(){
2. //初始化图片区域
3. var myimg = new Image();
4. myimg.src = $("#mypic2").attr("src");
5. //输出图片数据
6. $("#showSize").html(myimg.width + "×" + myimg.height);
7.
8. //初始化图片的位置,根据图片的宽度调整左右
9. $("#statistics, #picArea").css("left",$(window).width()/2-myimg.width/2);
10. $("#picArea").width(myimg.width).height(myimg.height);
11. var parentWidth = parseInt($("#picArea").width());
12. var parentHeight = parseInt($("#picArea").height());
13.
14. //显示鼠标的相对于图片的坐标(左上角为(0,0))
15. var offsetX = parseInt($("#picArea").css("left"));
16. var offsetY = parseInt($("#picArea").css("top"));
17. $("#mypic").bind("mousemove",function(e){
18. $("#xPos").text(e.pageX-offsetX);
19. $("#yPos").text(e.pageY-offsetY);
20. }); 等等!!