jquery截图插件的使用
2015-12-16 10:49
1086 查看
首先感谢http://www.htmleaf.com/Demo/201504211717.html这款插件。 使用之初,对于插件的结构很是糊涂,首先文件的核心是cropper.js,其次才是mian.js算是一个功能丰富的demo,其中文件包中也有example里边也是不错的demo,含有图片的上传与裁剪,以及裁剪后的上传(example的demo中这是重点,文件中的crop.php演示环境,导致没有搞懂上传,不知道提交的demo是否正确。这也是下来极重要解决的。) ①首先配置的是一系列属性,文件的裁剪配置, aspectRatio: NaN, //是自由裁剪还是按照比例16/9(等比例)
preview: '.img-preview', //截图时的预览模式 autoCropArea:0.5, //定义时初始化时截图框的百分比,大于0小于1的小数。百分数不行
(这部分也只是了解了项目中需要修改的部分,具体在demo中调试) ②其次,最重要的是保存替换当前图片为截图,在项目实际情况中的需求是,对商品的图片裁剪后直接生效,就需要讲裁剪的图片保存起来,并且替换当前的,<img 的src的url。由于crop.php没有环境配置,不知道其中的保存原理。于是联想到main.js中的getCroppedCanvas按钮,该按钮是获得了裁剪后的图片的。但是这个裁剪是一个canvas,就需要学习canvas的图片的保存方式。通过查看,发现保存的关键在main.js中的result = $image.cropper(data.method, data.option);上。通过alert(result ),发现result是一个HTMLCanvasElement,最后通过学习,HTMLCanvasElement有
preview: '.img-preview', //截图时的预览模式 autoCropArea:0.5, //定义时初始化时截图框的百分比,大于0小于1的小数。百分数不行
zoomable: false, //设置截图的时候是否图片可以由鼠标滑轮缩放 /2016/1/11
(这部分也只是了解了项目中需要修改的部分,具体在demo中调试) ②其次,最重要的是保存替换当前图片为截图,在项目实际情况中的需求是,对商品的图片裁剪后直接生效,就需要讲裁剪的图片保存起来,并且替换当前的,<img 的src的url。由于crop.php没有环境配置,不知道其中的保存原理。于是联想到main.js中的getCroppedCanvas按钮,该按钮是获得了裁剪后的图片的。但是这个裁剪是一个canvas,就需要学习canvas的图片的保存方式。通过查看,发现保存的关键在main.js中的result = $image.cropper(data.method, data.option);上。通过alert(result ),发现result是一个HTMLCanvasElement,最后通过学习,HTMLCanvasElement有
HTMLCanvasElement.toDataURL()能够返回canvas中的image的src.url。具体学习https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement这样得到的url其实是该图片的base64编码字符串,可以前台通过js处理,也可以传给后台,提交服务器保存的时候让后台python或者java处理。以下是本渣渣的部分代码,截图实在弹出的模态框种实现的:模态框id="edit-pic-modal"
$(".edit-pic").click(function(){ var edit_modal = $("#edit-pic-modal"), this_img = $(this).closest(".thumbnail").find("img"); if(this_img.attr("src")!="/static/image/add.png"){ var pic_link = $(this).closest(".thumbnail").find("img").attr("src") //var pic = $(this).closest(".thumbnail").find("img") $("#edit-img-content").html(""); var image_content = $("#edit-img-content"); var div=$("<div/>").attr("class","col-md-12"); var img_html_str="<div class='thumbnail img-container'>" +"<img src='" + pic_link + "' class='image img-responsive'>" +"</div>"; div.html(img_html_str).appendTo(image_content); edit_modal.modal("show"); var $image = $('.img-container > img'), $dataX = $('#dataX'), $dataY = $('#dataY'), $dataHeight = $('#dataHeight'), $dataWidth = $('#dataWidth'), $dataRotate = $('#dataRotate'), options = { aspectRatio: NaN, preview: '.img-preview', crop: function (data) { $dataX.val(Math.round(data.x)); $dataY.val(Math.round(data.y)); $dataHeight.val(Math.round(data.height)); $dataWidth.val(Math.round(data.width)); $dataRotate.val(Math.round(data.rotate)); } }; $image.on({ 'build.cropper': function (e) { console.log(e.type); }, 'built.cropper': function (e) { console.log(e.type); }, 'dragstart.cropper': function (e) { console.log(e.type, e.dragType); }, 'dragmove.cropper': function (e) { console.log(e.type, e.dragType); }, 'dragend.cropper': function (e) { console.log(e.type, e.dragType); }, 'zoomin.cropper': function (e) { console.log(e.type); }, 'zoomout.cropper': function (e) { console.log(e.type); } }).cropper(options); // Methods $(document.body).on('click', '[data-method]', function () { var data = $(this).data(), $target, result; if (data.method) { data = $.extend({}, data); // Clone a new one if (typeof data.target !== 'undefined') { $target = $(data.target); if (typeof data.option === 'undefined') { try { data.option = JSON.parse($target.val()); } catch (e) { console.log(e.message+"one"); } } } result = $image.cropper(data.method, data.option);//$image的内容没有变化 var res = result.toDataURL("image/png").split(","); if (data.method === 'getCroppedCanvas') { //alert("s=="+$('#getCroppedCanvasModal').modal().find('.modal-body').html(result).toDataURL("image/png")); $.ajax({ "type": "POST", "url": "/picture/"+shop_id+"/upload/base", "dataType": "json", "data": { "filedata": res[res.length-1] }, "success":function(data){ if(data.status == 1) { edit_modal.modal("hide"); this_img.attr("src",data.url); }else{ } }, "error": function(){ console.log("there is some error happened while editing."); } }) } if ($.isPlainObject(result) && $target) { try { $target.val(JSON.stringify(result)); } catch (e) { console.log(e.message + "two"); } } } }).on('keydown', function (e) { switch (e.which) { case 37: e.preventDefault(); $image.cropper('move', -1, 0); break; case 38: e.preventDefault(); $image.cropper('move', 0, -1); break; case 39: e.preventDefault(); $image.cropper('move', 1, 0); break; case 40: e.preventDefault(); $image.cropper('move', 0, 1); break; } }); }else{ return 0; } });当然代码太长,太渣,高手估计50行足以,才外还有的bug就是,点击第一次$(".edit-pic").click(function()还算是ok,当第二次点击的时候会报错: ② 2016/1/09修正了第二次点击错误 就是上段代码第78行提示的:
var res = result.toDataURL("image/png").split(","); toDataURL is not function的问题,主要原因是调试发现$image的对象再次编辑的时候没有变化,刚还是第一次的内容,导致canvas没有刷新(问题描述可能不太准确,但是就是$image的问题). 解决方法:在77,78行将$image重新取值更新一下,或者如下
var $new_image = $('.img-container > img'); var result = $new_image.cropper(data.method, data.option); //一下是在系统实际应用中出现的另外的问题 ③修正每次编辑完,其他图片也跟正变化的问题, 原因:系统中的模态框的提交按钮没有提交后没有解绑click事件,导致每次编辑后,同一个模态框绑定了多了一次,原来的url自然就被后边的更新了,也让我认识到了unbind()函数的作用; 解决方法:每次执行
$("#edit-pic-modal").find('[data-method="getCroppedCanvas"]').unbind().on('click', function () { 的时候先进行解绑事件
相关文章推荐
- jQuery Validate (摘自官网)
- jquery判断多个input输入框不能输入相同的值
- jQuery数据缓存方案详解:$.data()的使用
- jQuery插件之ajaxFileUpload
- JQuery筛选器全系列介绍
- Jquery笔记之Ajax
- JQuery AJAX调用WEB SERVICE方法
- Jquery easyui从零单排之datagrid多行数据删除
- jquery $.getJSON()跨域请求
- jQuery中ready与load事件的区别
- jQuery添加和删除指定标签的方法
- jquery学习(五)-jquery中的事件
- jquery chosen 插件多选初始化
- jquery验证表单
- jquery+html5 在web页面播放提示音
- 20151215jqueryUI--dialog代码备份
- 20151215jquery学习笔记--jqueryUI --dialog(对话框)
- JQuery归纳总结(增加中...)
- JQuery归纳总结(增加中...)
- jquery实现全文检索与鼠标滑过工具栏特效