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

图片裁剪的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. HDU2222(AC自动机入门题)

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  2. kafka之三:kafka java 生产消费程序demo示例

    kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kafka的安装请参考官方文档. 首先我们需要新建一个maven项目,然后在 ...

  3. Linux系统启动全过程

    分为两部分,第一部分是硬件本身需要加载的信息,之后才是加载Linux相关信息,因为有装有双系统的机器嘛 1.计算机加电 2.BIOS开始运行,检测硬件:cpu.内存.硬盘等 3.BIOS读取CMOS存 ...

  4. python os.system重定向stdout到变量 ,同时获取返回值

    Python执行系统命令的方法 os.system(),os.popen(),commands 最近在做那个测试框架的时候发现 Python 的另一个获得系统执行命令的返回值和输出的类. 最开始的时候 ...

  5. Request.UrlReferrer 实现页面刷新

    在使用Ajax 异步提交表单的时候,需要返回某些状态信息.但如果把需要返回的如分页.过滤的参数写在控制器的参数里面,会比较繁琐. 因此,1.可以在控制器里面使用 Request 对象的请求的URL. ...

  6. 有关map中使用iterate迭代器遍历的不保序问题和list remove(object)的细节问题

    今天在做项目的过程中发现了如下两个问题: 一 使用map的iterator迭代器对map进行遍历得到的结果是不保序的,也就是每次输出结果都是不一样的.针对这个问题,看以下iterator迭代器的源码. ...

  7. CF 345A Mike and Frog

    题目 自己歪歪的做法WA了好多发. 原题中每一秒都相当于 $x1 = f1(x1)$ $x2 = f2(x2)$ 然后这是一个定义域和值域都在[0,m-1]的函数,显而易见其会形成一个环. 而且环长不 ...

  8. Hadoop 源代码组织结构

    Hadoop 2.X 包括 编译好的可以直接部署的文件hadoop-{VERSION}.tar.gz; 还有源代码文件hadoop-{VERSION}-src.tar.gz , 需要 Maven 编译 ...

  9. STL中的vector实现邻接表

    /* STL中的vector实现邻接表 2014-4-2 08:28:45 */ #include <iostream> #include <vector> #include  ...

  10. Forward Rendering 正向渲染

    Forward Rendering 正向渲染        正向渲染一个基于着色器的渲染路径.它支持逐像素计算光照(包括法线贴图和灯光Cookies)和来自一个平行光的实时阴影.在默认设置中,少数最亮 ...