mui ajax 传递base64,HTML5 MUI 手机预览图片,裁剪上传base64,保存数据库
app和网站页面都可以使用
需要的文件:
这些都需要,这些文件在下文的参考网址可以下载
页面头部引用:
页面底部引用(但是在body里):
布局:
//触发选择图片事件
//默认图片以及选择裁剪后展示的效果
确认提交//保存数据事件
//等待动画
请稍等...
//关闭裁剪窗口
//左旋转90度
//右旋转90度
//确定
JS部分:
//post内容
function postAvatar() {
var petimage = $("#changeAvatar > img").attr("src");//此时取到的图片已经是base64形式
//你的处理代码,改post到服务器了,服务器接收同接收普通post参数一样,只是,存图片的字段改成ntext,这是sql的数据类型,其他数据库同类型,jq的getJSON可能会不执行,因为getJSON是get模式,图片转成base64后,很容易超出最大长度,其实,经过压缩后,一般不会超出的,具体压缩方法下文有
}
//拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var localurl = entry.toLocalURL(); //
$("#report").html('
');
cutImg();
mui('#picture').popover('toggle');
});
});
}
//相册选取
function galleryImgs() {
plus.gallery.pick(function(e) {
//alert(e);
$("#readyimg").attr("src", e);
cutImg();
mui('#picture').popover('toggle');
}, function(e) {
//outSet( "取消选择图片" );
}, {
filter: "image"
});
}
//照片裁剪类
function cutImg() {
$(".mui-content").hide();
$("#showEdit").fadeIn();
var $image = $('#report > img');
$image.cropper({
checkImageOrigin: true,
aspectRatio: 1 / 1,
autoCropArea: 0.3,
zoom: -0.2
});
//$image.cropper('zoom',-0.5);
}
//确认照片,展示效果
function confirm() {
$("#showEdit").fadeOut();
var $image = $('#report > img');
var dataURL = $image.cropper("getCroppedCanvas");
//var imgurl = dataURL.toDataURL("image/png", 0.5);
//换成下边的方法,转成jpeg,但是把质量降低,
//经测试51k的png,转成0.3质量,大小为3k多,0.5质量大小为4k多,
//这回应该不会出现卡的情况了,
//既然差别1k多,还是用0.5的质量,还是要兼顾下显示效果的。
var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
$("#changeAvatar > img").attr("src", imgurl);
//$("#divbtn").show();
$(".mui-content").show();
}
//旋转照片
function rotateimg() {
$("#readyimg").cropper('rotate', 90);
}
function rotateimgleft() {
$("#readyimg").cropper('rotate', -90);
}
function closepop() {
$("#showEdit").fadeOut();
var $image = $('#report > img');
$image.cropper('destroy');
$(".mui-content").show();
}
function showActionSheet() {
var bts = [{
title: "拍照"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
getImage();
} else if (e.index == 2) {
galleryImgs();
}
//outLine( "选择了\""+((e.index>0)?bts[e.index-1].title:"取消")+"\"");
}
);
}
效果图如下:
服务器端Asp.net
string[] arrimg = img.Split(';');//img是request['img']取到的完整的base64
img = arrimg[1].Substring(7);//截取字符串
byte[] arr = Convert.FromBase64String(img);
string newPath = "Images/" + DateTime.Now.ToString("yyyyMMdd") + "/";
if (!Directory.Exists(HttpContext.Current.Server.MapPath(newPath)))
{
System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(newPath));
}
string filename = Common.GetGuid() + ".jpg";
File.WriteAllBytes(HttpContext.Current.Server.MapPath(newPath) + filename, arr);//简单方便,直接另存为
Content = Common.GetRootURI() + "System/Controls/" + newPath + filename;//这里是图片在服务器上的路径,GetRootURI方法在下边
public static string GetRootURI()
{
string AppPath = "";
HttpContext HttpCurrent = HttpContext.Current;
HttpRequest Req;
if (HttpCurrent != null)
{
Req = HttpCurrent.Request;
string UrlAuthority = Req.Url.GetLeftPart(UriPartial.Authority);
if (Req.ApplicationPath == null || Req.ApplicationPath == "/")
{
//直接安装在 Web 站点
AppPath = UrlAuthority + "/";
}
else
{
//安装在虚拟子目录下
AppPath = UrlAuthority + Req.ApplicationPath + "/";
}
}
return AppPath;
}
参考网址:
https://github.com/fengyuanchen/cropper/blob/master/README.md
https://github.com/fengyuanchen/cropper
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
还有一个对api的详细介绍,网址找不到了,是火狐哪个网页,比较详尽的api实用说明,等找到放上来。
其实就是仔细看api,耐心看英文说明,还有就是不停的实践、多想,终于功夫不负有心人。
mui ajax 传递base64,HTML5 MUI 手机预览图片,裁剪上传base64,保存数据库相关推荐
- 使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...
- 9行代码实现图片上传和预览(自定义按钮上传)
9行代码实现图片上传和预览(自定义按钮上传) 结果展示: 默认展示 2.点击按钮后,选择图片文件 图片预览 首先我们定义一个type为file的input,并将它隐藏,绘制一个button,在按钮点击 ...
- vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件 效果如图 直接看代码吧 template部分 <div class="file-upload&q ...
- html5调用手机摄像头,实现拍照上传功能
http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- java 预览zip_java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载
java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 如果不知道如何上传 ...
- html上传头像及预览,JS实现上传头像并实时预览
说起各大网站的用户中心功能,其中就少不了用户头像上传这个小小的功能,如果我们依托框架来编写的的话,相信非常的容易,但如果我们自己来单纯的使用JS来实现头像上传,并在选择本地头像的时候,实现预览我想也是 ...
- java 视频预览_java在上传视频时生成预览图
在圣品上传时往往需要生成一张预览图(缩略图),如果在非特殊情况下让用户单独上传,会造成工作压力,此时可以用视频中某一帧作为封面图,实现方式如下: public class ImageUtil { /* ...
最新文章
- 2022-2028年中国集装箱涂料行业市场研究及前瞻分析报告
- 【关于封装的那些事】 缺失封装 【关于封装的那些事】 泄露的封装 【关于封装的那些事】 不充分的封装 【图解数据结构】二叉查找树 【图解数据结构】 二叉树遍历...
- Java设计模式之结构型:装饰器模式
- Oracle发布Java 8
- solr 的maven_使用Maven运行Solr
- PDH光端机的原理_PDH光端机的作用优点
- 每天一点Swift(五)控制器的生命周期和SizeClass
- Java 中实现定时服务 在ssh框架中跟普通工程里面创建的方式
- 800万,这位两院院士全捐了!
- 便利蜂发布双11战报:当天外卖订单最多的是这个城市
- matlab求两向量夹角_高等数学之向量代数与空间解析几何知识点与题型总结
- Windows平台下的session0创建进程的问题与解决办法
- BZOJ3772精神污染
- 植物神经紊乱引起的焦虑、烦躁怎么办?
- 【Android开发】android最全的颜色对应的16进制代码(androidUI设计必备)
- 把对象push进数组
- 2019FME博客大赛——基于 FME 求算最佳租房方案
- javaWeb期末复习实验专题
- Linux命令行技巧——使用目录栈进行导航
- linux下ganglia监控系统搭建,linux下ganglia监控系统搭建
热门文章
- SAP Fiori应用里对国际化RTL需求(right-to-left)的支持
- CDS view里case - when - else关键字的用法
- SAP offline应用的flush按钮实现
- the title and note has maintained the same text type
- try to navigate from button to line item page
- how is SAP ui5 focus handler implemented
- 推荐一个比较好用的Chrome扩展应用,提供了桌面便签功能
- 打开My Lead detail page会发生timeout的错误的解决方案
- graphql-yoga的安装步骤
- Java语言学习之泛型的用法