Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 【重构】 Apr 25, 2019
font 模版一调整、加入模版二 Jul 13, 2018
img 测试用例修改 May 22, 2019
lib node_modules 未提交 测试例子 异常 修改 Jun 5, 2019
.gitignore 不上传 node_modules Apr 30, 2019
404.jade 加入静态服务器 harp支持 Mar 14, 2018
README.md readme 修改 May 21, 2019
_layout.jade 加入静态服务器 harp支持 Mar 14, 2018
bower.json 小修改 Mar 19, 2018
gulpfile.js 【重构】 Apr 25, 2019
index.jade 加入静态服务器 harp支持 Mar 14, 2018
index.js 浏览器前缀处理 版本更新 May 22, 2019
main.less 加入静态服务器 harp支持 Mar 14, 2018
package.json node_modules 未提交 测试例子 异常 修改 Jun 5, 2019
template-1.css 【重构】 Apr 25, 2019
template-1.html 模版一修改 Jul 13, 2018
template-2.css
template-2.html 模版二修改 Jul 19, 2018
template-3.css 【重构】 Apr 25, 2019
test-1.html node_modules 未提交 测试例子 异常 修改 Jun 5, 2019
test-2.html node_modules 未提交 测试例子 异常 修改 Jun 5, 2019
test-3.html node_modules 未提交 测试例子 异常 修改 Jun 5, 2019

README.md

SimpleCrop

一个在功能交互上复刻移动设备原生图片裁剪功能的Web图片裁剪组件。

之所以会做这个项目主要是因为已知的图片裁剪组件并不能完全满足自己的要求,比如:

只支持旋转固定角度。

完全不支持旋转。

因此和目前流行的 Web 图片裁剪组件相比,其优势在于以下几点:

  • 1、裁剪图片支持任意角度旋转;
  • 2、支持边界判断、当裁剪框里出现空白时,图片自动吸附至完全填满裁剪框;
  • 3、裁剪框位置支持偏移(可以不用固定在页面中心)。

示例一

左侧是IOS系统自带的图片裁剪功能,右侧为组件的示例一;

可以扫描二维码体验:

或者访问以下链接:

https://newbieyoung.github.io/Simple-Crop/test-2.html

相关配置参数以及样式适用于移动端;

<link rel="stylesheet" href="./dist/template-2.css">
var offsetTop = document.documentElement.clientHeight*0.04;
var offsetLeft = document.documentElement.clientWidth*0.02;

var simpleCrop = new SimpleCrop({
    src:'./img/test1.jpg',
    size:{
        width:1000,
        height:600
    },
    borderWidth:1,
    cropSizePercent:0.9,
    controller:['touch'],
    positionOffset:{left:offsetLeft,top:offsetTop},
    coverColor:'rgba(0,0,0,.3)',
    funcBtns:['close','crop','around','reset'],
    scaleSlider:false,
    rotateSlider:true,
    cropCallback:function(){
        this.$resultCanvas.style.marginRight = '10px';
        this.$resultCanvas.style.width = '50%';
        document.body.appendChild(this.$resultCanvas);
    }
});

因为需要用到多指触摸操作,目前使用AlloyFinger

<script src="./lib/alloy_finger.js"></script>
参数 说明
src 素材图片地址
size 裁剪图片尺寸
borderWidth 裁剪框边框宽度
cropSizePercent 裁剪框占裁剪显示区域的比例,0.9表示所占比例为90%
controller 控制方式,取值有两种,分别为touch表示触摸操作适用于移动端;mouse表示鼠标操作适用于PC
positionOffset 裁剪框偏移,一般默认裁剪框在画布中心,如果不想在中心则需要设置这个属性来对其位置进行一定的偏移
coverColor 非裁剪框区域遮罩颜色
funcBtns 功能按钮设置,取值有四种,分别为close表示关闭功能按钮、reset表示还原功能按钮、around表示整角90度旋转按钮、crop表示裁剪按钮;属性中的顺序决定其DOM元素的层级顺序
scaleSlider 是否开启滑动缩放组件,因为在PC端不支持双指触摸,因此需要设置这个属性为true,来启动控制缩放的滑动组件,移动端没必要则设置为false
rotateSlider 是否开启旋转滑动组件,本来双指触摸既可以用来控制缩放也可以用来控制旋转,但是实际体验时感觉不能使用一种操作控制两种功能,因此最终只使用双指触摸控制缩放,旋转使用额外组件来控制
cropCallback 图片裁剪回调函数,在函数中通过this.$resultCanvas来获取裁剪结果

示例二

如图:

请访问以下链接https://newbieyoung.github.io/Simple-Crop/test-1.html

相关配置参数以及样式适用于PC端;

<link rel="stylesheet" href="./dist/template-1.css">
var simpleCrop = new SimpleCrop({
    title:'上传图片过大,请裁剪',
    src:'./img/test1.jpg',
    size:{
        width:800,
        height:900
    },
    cropCallback:function(){
        this.$resultCanvas.style.marginRight = '10px';
        this.$resultCanvas.style.width = '50%';
        document.body.appendChild(this.$resultCanvas);
    },
    coverDraw:function(){
        //...
    }
});
参数 说明
title 标题
coverDraw 辅助线绘制函数

其它

相关原理以及实现请查看SimpleCrop 支持任意角度旋转的图片裁剪组件

You can’t perform that action at this time.