The invention discloses an H5 picture clipping method, which includes the following steps: a, calling input [file] to obtain the picture path; b, converting the picture into base64 data; c, calculating the base64 data needed to be reassembled into a complete picture according to the position of the picture clipping frame; d, converting the calculated Base64 data into the clipped picture. The H5 image clipping method does not refer to jQuery, so it is relatively lightweight and suitable for PC side. When you need this function, you only need to refer to a JS library, which can be used in the page by referencing calls.
【技术实现步骤摘要】
一种H5图片裁剪方法
本专利技术涉及HTML5
，特别是一种H5图片裁剪方法。
技术介绍
目前H5图片裁剪大多依赖jQuery库比较重不利于移动端开发，技术人员引用也相对烦琐，另外用户在上传图片的同时，因手机像素不同长宽比例也不同，所以上传图片的大小比例不同。
技术实现思路
为解决现有技术中存在的问题，本专利技术提供了一种H5图片裁剪方法，该方法比现有的代码轻量且没有基于jQuery，使现在移动端不兼容jQuery的框架问题得到了更好的解决，同时他兼容PC端，引用框架也相当简单，对选择的框的裁剪也可以调整比例。本专利技术采用的技术方案是：一种H5图片裁剪方法，包括如下步骤：a、调用input[file]获取图片路径；b、将图片转化成base64数据；c、根据图片裁剪框涉及的位置计算出重新组合成一张完整图片所需的base64数据；d、将计算后的base64数据转化成裁剪后的图片。优选地，基于JavaScript开发实现。优选地，步骤b包括如下步骤：以待裁剪图片的图片区域内的一个点为原点建立二维直角坐标系，计算待裁剪图片的四条边的直线方程。优选地，步骤c包括如下步骤...
【技术保护点】
1.一种H5图片裁剪方法，其特征在于，包括如下步骤：a、调用input[file]获取待裁剪图片路径；b、将待裁剪图片转化成base64数据；c、根据图片裁剪框涉及的位置计算出重新组合成一张完整图片所需的base64数据；d、读取重新组合图片所需的base64数据转化成裁剪后的图片。
【技术特征摘要】
1.一种H5图片裁剪方法，其特征在于，包括如下步骤：a、调用input[file]获取待裁剪图片路径；b、将待裁剪图片转化成base64数据；c、根据图片裁剪框涉及的位置计算出重新组合成一张完整图片所需的base64数据；d、读取重新组合图片所需的base64数据转化成裁剪后的图片。2.根据权利要求1所述的H5图片裁剪方法，其特征在于，基于JavaScript开发实现。3.根据权利要求1所述的H5图片裁剪方法，其特征在于，步骤b包括如下步骤：以待裁剪图片的图片区域内的一个点为原点建立二维直角坐标系，计算待裁剪图片的四条边的直线方程。4.根据权利要求3所述的H5图片裁剪方法，其特征在于，步骤c包括如下步骤：根据裁剪框的位置信息，确定在同一二维直角坐标系下裁剪框的四个端点的坐标值；根据直线方程及坐标值，判断所述裁剪框的四个端点是否位于所述直线方程构成的区域内，如果是，则裁剪框的覆盖区域完全位于待裁剪图片的图片区域内，使用裁剪框进行计算；否则不完全位于，将裁剪框的覆盖区域调整至待裁剪的图片区域内，使用调整后的裁剪框进行计算。5.根据权...
【专利技术属性】
技术研发人员：石在，左紫阳，
申请(专利权)人：四川商通实业有限公司，
类型：发明
国别省市：四川,51
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。