本发明涉及html5技术领域,特别是一种h5图片裁剪方法。
背景技术:
目前h5图片裁剪大多依赖jquery库比较重不利于移动端开发,技术人员引用也相对烦琐,另外用户在上传图片的同时,因手机像素不同长宽比例也不同,所以上传图片的大小比例不同。
技术实现要素:
为解决现有技术中存在的问题,本发明提供了一种h5图片裁剪方法,该方法比现有的代码轻量且没有基于jquery,使现在移动端不兼容jquery的框架问题得到了更好的解决,同时他兼容pc端,引用框架也相当简单,对选择的框的裁剪也可以调整比例。
本发明采用的技术方案是:
一种h5图片裁剪方法,包括如下步骤:
a、调用input[file]获取图片路径;
b、将图片转化成base64数据;
c、根据图片裁剪框涉及的位置计算出重新组合成一张完整图片所需的base64数据;
d、将计算后的base64数据转化成裁剪后的图片。
优选地,基于javascript开发实现。
优选地,步骤b包括如下步骤:
以待裁剪图片的图片区域内的一个点为原点建立二维直角坐标系,计算待裁剪图片的四条边的直线方程。
优选地,步骤c包括如下步骤:
根据裁剪框的位置信息,确定在同一二维直角坐标系下裁剪框的四个端点的坐标值;
根据直线方程及坐标值,判断所述裁剪框的四个端点是否位于所述直线方程构成的区域内,
如果是,则裁剪框的覆盖区域完全位于待裁剪图片的图片区域内,使用裁剪框进行计算;
否则不完全位于,将裁剪框的覆盖区域调整至待裁剪的图片区域内,使用调整后的裁剪框进行计算。
优选地,根据直线方程及坐标值,判断所述裁剪框的四个端点是否位于所述直线方程构成的区域内,包括:
根据直线方程,生成对应于待裁剪的图片的四条边的四个函数;
将裁剪框的四个端点分别代入待裁剪的图片的四条边所对应的四个函数中;
针对每个函数,判断裁剪框的四个端点代入该函数的结果是否同号;
如果均同号,进一步针对每组互为对边的边所对应的两个函数,判断裁剪框的四个端点代入该两个函数的结果是否异号,如果均异号,则所述裁剪框的四个端点位于所述直线方程构成的区域内。
优选地,将裁剪框的覆盖区域调整至待裁剪的图片区域之前,还包括:
向用户展示用于提示裁剪框已超出待裁剪图片的图片区域的第一消息提示。
优选地,将裁剪框的覆盖区域调整至待裁剪的图片区域之前,还包括:
向用户展示用于询问是否接受系统自动将覆盖区域调整至图片区域内的第二消息提示;
在接收到用户针对所述第二消息提示做出的肯定操作后,执行将裁剪框的覆盖区域调整至待裁剪的图片区域内的步骤。
本发明的有益效果是:
1、该方法比现有的代码轻量且没有基于jquery,使现在移动端不兼容jquery的框架问题得到了更好的解决,同时他兼容pc端,引用框架也相当简单,对选择的框的裁剪也可以调整比例。
2、本发明可以针对发生角度旋转的图片,通过比较裁剪框的覆盖区域是否落入待裁剪图片的图片区域内的方式,决定具体采用何种裁剪方式,从而保证在用户对发生角度旋转的图片进行裁剪时,裁剪框不超出待裁剪图片的图片区域。
具体实施方式
下面根据实施例对本发明进行详细说明。
实施例
一种h5图片裁剪方法,包括如下步骤:
a、调用input[file]获取图片路径;
b、将图片转化成base64数据;
c、根据图片裁剪框涉及的位置计算出重新组合成一张完整图片所需的base64数据;
d、将计算后的base64数据转化成裁剪后的图片。
具体地,基于javascript开发实现。
在其中一个实施例中,步骤b包括如下步骤:
以待裁剪图片的图片区域内的一个点为原点建立二维直角坐标系,计算待裁剪图片的四条边的直线方程。
步骤c包括如下步骤:
根据裁剪框的位置信息,确定在同一二维直角坐标系下裁剪框的四个端点的坐标值;
根据直线方程及坐标值,判断所述裁剪框的四个端点是否位于所述直线方程构成的区域内,
如果是,则裁剪框的覆盖区域完全位于待裁剪图片的图片区域内,使用裁剪框进行计算;
否则不完全位于,将裁剪框的覆盖区域调整至待裁剪的图片区域内,使用调整后的裁剪框进行计算。
在其中一个实施例中,根据直线方程及坐标值,判断所述裁剪框的四个端点是否位于所述直线方程构成的区域内,包括:
根据直线方程,生成对应于待裁剪的图片的四条边的四个函数;
将裁剪框的四个端点分别代入待裁剪的图片的四条边所对应的四个函数中;
针对每个函数,判断裁剪框的四个端点代入该函数的结果是否同号;
如果均同号,进一步针对每组互为对边的边所对应的两个函数,判断裁剪框的四个端点代入该两个函数的结果是否异号,如果均异号,则所述裁剪框的四个端点位于所述直线方程构成的区域内。
假定裁剪框的四个端点坐标值分别为(ax1,ay1),(bx1,by1),(cx1,cy1),和(dx1,dy1),其中一条边的直线方程为ex+fy+g=0(e,f,g为某一常量),则对应的函数为f(x,y)=ex+fy+g,同理可求得其它三条边的函数。
将裁剪框的四个端点分别代入待裁剪的图片的四条边所对应的四个函数中,如代入每条边的函数中均满足:
e*ax1+f*ay1+g<=0并且e*bx1+f*by1+g<=0并且e*cx1+f*cy1+g<=0并且e*dx1+f*dy1+g<=0同时成立;
或e*ax1+f*ay1+g>=0并且e*bx1+f*by1+g>=0并且e*cx1+f*cy1+g>=0并且e*dx1+f*dy1+g>=0同时成立。
则进一步针对每组互为对边的边所对应的两个函数,判断裁剪框的四个端点代入该两个函数的结果是否异号,计算方法同上,如果均异号,则所述裁剪框的四个端点位于所述直线方程构成的区域内。
在其中一个实施例中,将裁剪框的覆盖区域调整至待裁剪的图片区域之前,还包括:
向用户展示用于提示裁剪框已超出待裁剪图片的图片区域的第一消息提示。
在其中一个实施例中,将裁剪框的覆盖区域调整至待裁剪的图片区域之前,还包括:
向用户展示用于询问是否接受系统自动将覆盖区域调整至图片区域内的第二消息提示;
在接收到用户针对所述第二消息提示做出的肯定操作后,执行将裁剪框的覆盖区域调整至待裁剪的图片区域内的步骤。
以上所述实施例仅表达了本发明的具体实施方式,其描述较为具体和详细,但并不能因此而理解为对本发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。