您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码，非常的简单实用，效果也很棒，有需要的小伙伴可以参考下。
网页端 裁剪图片，不需要经过服务器。
这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop.
高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。
核心代码：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.on(el, 'change', function (evt){ var files = FileAPI.getFiles(evt); // Retrieve file list FileAPI.filterFiles(files, function (file, info){ if( !/^image/.test(file.type) ){ alert('图片格式不正确'); return false; } else if(file.size > 20 * FileAPI.MB){ alert('图片必须小于20M'); return false; } else{ return true; } }, function (files, rejected){ console.log(files); if( files.length ){ var file = files[0]; var img0 = FileAPI.Image(file); var img1 = FileAPI.Image(file); var ratio = 0; FileAPI.getInfo(file, function (err, info) { //get image ratio if (!err) { if (info.width > info.height) { ratio = info.width / 500; } else { ratio = info.height / 500; } } }); img0.resize(500, 500, 'max') //place image and register jcrop .get(function(err, img) { $('#img2').empty(); $('#img2').append($(img)); $('#img2').children().Jcrop({ aspectRatio: 1, bgColor: 'rgba(0,0,0,0.4)', onSelect: function(c) { img1.matrix.sx = c.x * ratio; img1.matrix.sy = c.y * ratio; img1.matrix.sw = c.w * ratio; img1.matrix.sh = c.h * ratio; img1.matrix.dw = 500; img1.matrix.dh = 500; img1.get(function(err, img) { // $('#img3').empty(); // $('#img3').append($(img)); $('#img3').html($(img)); }); } }); }); $('#btn').on('click',function(){ FileAPI.upload({ // url: '/testUpFile/upFile', // headers: { 'Content-Type': 'multipart/form-data' }, files: { images: img1 }, progress: function (evt){ /* ... */ }, complete: function (err, xhr){ /* ... */ //alert(xhr.responseText); console.log(xhr); } }); }); } }); }); });完整代码：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="./jquery.min.js"></script> <script src="./jcrop/jquery.Jcrop.min.js"></script> <link href="./jcrop/jquery.Jcrop.min.css" rel="stylesheet"> </head> <style> .upload-btn { width: 130px; height: 25px; overflow: hidden; position: relative; border: 3px solid #06c; border-radius: 5px- 上一个程序编程： JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
- 下一个程序编程： jQuery图片特效插件Revealing实现拉伸放大
