在移动端开发的过程中,或许会遇到对图片裁剪的问题。当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉。

图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都是支持pc端的图片裁剪,而支持移动端图片裁剪的少,很流畅的可能就会更少了。

作为一个新手,我尝试了很多种解决方法,在初始的时候尝试自己写一个jquery插件支持触屏事件等,写出来了,但是觉得都不好意思拿出手,更别说拿出来商用了。

又尝试找了一些插件,一个个试。最后综合评价,感觉还不错的jquery插件:cropper这个jquery创建。

看了一下感觉还是挺简单的。

下面就是我使用过程的一些代码,希望能对大家有所帮助。

插件导入:

<link rel="stylesheet" href="../../../css/delimg/cropper.css"/>
<script src="../../../js/libs/jquery.min.js"></script>
<script src="../../../js/delimg/cropper.js"></script>

必要的一点html代码:

<div class="img-container">
<img src="" alt="">
</div>

  注意:一般情况下,图片会动态生成,所以当前的src值,为空。如果你是静态图片进行图片截取,那就更简单了。看下面代码就懂了。

插件的使用(很简单):

var $image = $('.img-container > img');

$image.attr("src", imgurl);    

$image.on("load", function() {        // 等待图片加载成功后,才进行图片的裁剪功能
$image.cropper({
aspectRatio: /   // 1:1的比例进行裁剪,可以是任意比例,自己调整
});
})

现在只是做了一个框架,最主要的是下面的代码,获取到图片的数据才是最主要的,所以我们需要利用到canvas的特异功能,将图片裁剪的部分转化为base64的字符串进行前后端数据的交互。

然而,cropper并不会给你提供现成的base64字符串,但是他给你了一串的数据对象,供你自己任意发挥。

点击某个按钮时,确定剪裁这一高亮的部分:

$(selector).on("tap", function() {
var src = $image.eq().attr("src");
var canvasdata = $image.cropper("getCanvasData");
var cropBoxData = $image.cropper('getCropBoxData'); convertToData(src, canvasdata, cropBoxData, function(basechar) {
// 回调后的函数处理
});
})

当然这也不是重点,重点是下面这个函数处理

function convertToData(url, canvasdata, cropdata, callback) {
var cropw = cropdata.width; // 剪切的宽
var croph = cropdata.height; // 剪切的宽
var imgw = canvasdata.width; // 图片缩放或则放大后的高
var imgh = canvasdata.height; // 图片缩放或则放大后的高 var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置 var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'); canvas.width = cropw;
canvas.height = croph; var img = new Image();
img.src = url; img.onload = function() {
this.width = imgw;
this.height = imgh;
// 这里主要是懂得canvas与图片的裁剪之间的关系位置
ctx.drawImage(this, poleft, potop, this.width, this.height);
var base64 = canvas.toDataURL('image/jpg', ); // 这里的“1”是指的是处理图片的清晰度(0-1)之间,当然越小图片越模糊,处理后的图片大小也就越小
callback && callback(base64) // 回调base64字符串
}
}

好啦,就到这里了,该处理的东西都处理了,当然这里一个放大缩小的正向处理剪裁,如果需要对图片的旋转等一些列的操作的话,也是可以得,这里只是给大家展示一个简单的demo的实现,如果有用得上的,可以作为参考。

 
 

H5移动端图片裁剪(base64)的更多相关文章

  1. node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  2. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  3. 移动端实现裁剪图片生成base64图片(可缩放)

    移动端实现裁剪图片生成base64图片(可缩放)<pre><!DOCTYPE html><html lang="en"> <head> ...

  4. 移动端 H5图片裁剪插件,内置简单手势操作

    前面曾经写过一篇<H5图片裁剪升级版>,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中. 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计 ...

  5. 从web图片裁剪出发:了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  6. 移动端H5选择本地图片

    移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...

  7. vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

    思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBo ...

  8. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  9. bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类 (二) 图片裁剪

    图片裁剪参见: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail        一个js插件 http://www.mikes ...

随机推荐

  1. SQL集锦之IndexOf、LastIndexOf 【转】

    DECLARE @Name NVARCHAR (50)SET @Name = '12345.67890ABCDE.FGHIJKLMNOPQRSTUVWXYZTest' DECLARE @Positio ...

  2. 《Kubernetes权威指南第2版》学习(一) Kubernetes是什么

    1.1 Kubernetes是什么? 首先,它是一个全新的基于容器技术的分布式架构领先方案.是谷歌的Borg(大规模集群管理系统)的一个开源版本. 其次,如果系统设计遵循了Kubernetes的设计思 ...

  3. Apple Tree

    题意: 给一有根树,每个叶子上有一些苹果,现在要求你拿掉一些苹果,使得每一个点的 儿子的子树内的苹果数相同. 解法: 首先可以发现$cnt$个叶子节点之间的关系可以用$cnt-1$个独立方程表示出来. ...

  4. POJ - 3190 Stall Reservations 贪心+自定义优先级的优先队列(求含不重叠子序列的多个序列最小值问题)

    Stall Reservations Oh those picky N (1 <= N <= 50,000) cows! They are so picky that each one w ...

  5. 洛谷 - P3786 - 萃香抱西瓜 - 状压dp

    重构一下就过了,不知道之前错在哪里. #include<bits/stdc++.h> using namespace std; typedef unsigned long long ull ...

  6. BlocksKit的使用

    一.引言 众所周知Block已被广泛用于iOS编程.它们通常被用作可并发执行的逻辑单元的封装,或者作为事件触发的回调.Block比传统回调函数有2点优势: 允许在调用点上下文书写执行逻辑,不用分离函数 ...

  7. PhpStorm插件之Translation

    安装插件 File->Setting->Pluugins   搜索  Translation 如何使用 安装完插件后,RESTART IDE 快捷键 Ctrl+Shift+Y   OR 选 ...

  8. CodeForces 723F【DFS瞎搞】

    题意: 给你一幅图,你要用这些边构造一个树, s和t两个节点的度数不能超过ds dt 而且图是保证没有环 思路: 树的性质是:无环(已经保证),无向(保证),连通(还要判断) 首先把S,T点从图里剥离 ...

  9. unity2d 动画

    1 资源test.jpg(如下)放入Resources文件夹 2 切割图片 点击图片,在inspector中,选择Texture Type为Sprite(2D and UI),然后点击Sprite E ...

  10. DOM0、DOM2级事件

    JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...