Jq custom cropping: the code is super simple and easy to modify. jq custom cropping code
1. Custom width and height
1. html code index.html
<!DOCTYPE html>
2. Add plug-in code
(function ($) { $.fn.photoCrop=function (option) { var opt={ img:'', fixedScale:9/5, isHead:null, maxWidth:'1400', maxHeight:'800', callBack:function () {} } opt=$.extend(opt,option); var _this=this; var imgSrc=opt.img ? opt.img:_this.attr('src'); var photoCropBox=$('<div id="photoCropBox"> $(function () { $('.source').on('click',function () { $(this).photoCrop({ fixedScale:false, isHead:false, callBack:function(url){ $('.target').attr('src',url) }, }); }) })
2. Fixed Effect of wide/High Ratio
Code:
$(function () { $('.source').on('click',function () { $(this).photoCrop({ fixedScale:5/6, isHead:false, callBack:function(url){ $('.target').attr('src',url) }, }); }) })3. Avatar cropping Effect
Code:
$(function () { $('.source').on('click',function () { $(this).photoCrop({ fixedScale:1, isHead:true, callBack:function(url){ $('.target').attr('src',url) }, }); }) })
The above code is easy to modify and can be expanded on your own.
Http://www.cnblogs.com/jiebba my blog, come on!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
