H5移动端图片裁剪(base64)
在移动端开发的过程中,或许会遇到对图片裁剪的问题。当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉。
图片裁剪的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)的更多相关文章
- node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- 移动端实现裁剪图片生成base64图片(可缩放)
移动端实现裁剪图片生成base64图片(可缩放)<pre><!DOCTYPE html><html lang="en"> <head> ...
- 移动端 H5图片裁剪插件,内置简单手势操作
前面曾经写过一篇<H5图片裁剪升级版>,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中. 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计 ...
- 从web图片裁剪出发:了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...
- 移动端H5选择本地图片
移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...
- vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用
思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBo ...
- ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制
我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...
- bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类 (二) 图片裁剪
图片裁剪参见: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail 一个js插件 http://www.mikes ...
随机推荐
- MVC错误:查询的结果不能枚举多次
应用程序中的服务器错误. 查询的结果不能枚举多次. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: S ...
- nohup 命令 print 不能实时输出至 nohup.out
1. 原因 Python 的输出存在缓冲机制,因此不能实时输出结果至 nohup.out 2. 解决方案 用下面的命令即可解决: nohup python -u FileName > nohup ...
- linux命令:wc命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...
- python3 类 组合
解决类与类之间代码冗余问题有两种解决方案: 第一 是继承,第二是组合 1:继承 描述的是类与类之间的也就是什么是什么的关系 2: 组合 描述的是类与类之间的关系, 是一种什么有什么的关系的,也 ...
- Docker 网络模型之 macvlan 详解,图解,实验完整
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 上一篇文章我们 ...
- beans.xml中的头部配置
Spring配置文件beans.xml头部配置解释 关于在beans.xml要使用哪些功能,官网上已经提供了每个功能说明和标准的头文件信息,当我们在开发使用时要哪些功能,都可以上官网去定位. http ...
- TP5之发送邮件
1.下载扩展,vendor\phpmailer 文件结构: 2.话不多说,上代码 注意点: · 需要提前开通对应邮箱的SMTP服务 · $mail->Host = " & ...
- builtin_shaders-5.3.4f1学习-Sprites-Default
Shader "Sprites/Default" { Properties { [PerRendererData] _MainTex ("Sprite Texture&q ...
- 洛谷P3312 [SDOI2014]数表(莫比乌斯反演+树状数组)
传送门 不考虑$a$的影响 设$f(i)$为$i$的约数和 $$ans=\sum\limits_{i=1}^n\sum\limits_{j=1}^nf(gcd(i,j))$$ $$=\sum\limi ...
- AttributedString 图片间距问题
1.NSMutableAttributedString如何显示图片 NSMutableAttributedString *vipStr = [[NSMutableAttributedString al ...