课程中心 问答&分享 读书 注册、登录 关闭菜单
使用hui 图片剪裁组件
课程介绍:
使用hui的huiImgCuter完成图片的选择、剪裁及上传。
发布时间 : 2016-12-24  浏览 : 4547 次
教程内容

hui图片剪裁组件详解,涉及内容:图片选择、剪裁、上传等,具体内容请观看本节视频教程。

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/hui.css" />
<style>
/* 必要的css  */
#huiImgCuter{width:80%; height:80%; position:absolute; left:10%; top:10%; z-index:9; background:rgb(255,255,255,0); border:1px solid #FFFFFF;}
.huiCuterMask{width:100%; height:10px; position:absolute; left:0px; top:0px; z-index:8; background:rgba(0,0,0,0.8);}
#huiImgCutImgIn{width:100%;}
#huiCuterCanvas{position:fixed; display:none; z-index:20; top:60px; right:10px; width:100px; border:1px solid #FFFFFF; font-size:0px;}
#huiCuterCanvas canvas{width:100%;}
</style>
</head>
<body>
<div id="HUI_Header">
    <button type="button" class="HUI_ButtonSmall HUI_FR" style="background:#FFFFFF; margin:8px 10px; color:#3283FA;" id="uploadNow">上传照片</button>
    <div id="HUI_Back"></div>
</div>
<div class="HUI_Wrap">
    <!-- 图片裁切核心区域  -->
    <div id="huiImgCutShow" style="position:relative; font-size:0px;"></div>
    <!-- huiCanvas 用户保存剪裁后的图片信息 -->
    <div id="huiCuterCanvas"><canvas id="huiCanvas" width="360" height="200"></canvas></div>
    <!-- 底部选择图片按钮 -->
    <div style="position:fixed; background:rgba(0,0,0,0.8); z-index:10; left:0px; bottom:0px; height:40px; padding:8px 1%; width:98%;">
        <button type="button" class="HUI_Button HUI_Icons HUI_Icons_add" style="width:100%;" id="chooseImg"> 选择照片</button>
    </div>
</div>
<script type="text/javascript" src="js/hui.js"></script>
<script type="text/javascript" src="js/huiImgCuter.js"></script>
<script>
var imgCuter;
//选择照片
hui('#chooseImg').click(function(){
    //选择照片
    plus.gallery.pick( function(path){
        hui('#huiImgCutShow').html('<div id="huiImgCutImgIn"><img src="'+path+'" /></div>');
        hui('#huiImgCutShow').find('img').eq(0).css({'display':'none'});
        hui('#huiImgCutShow').find('img').eq(0).dom[0].onload = function(){
            hui('#huiImgCutShow').find('img').eq(0).show();
            imgCuter = null;
            imgCuter = new huiImgCuter('#huiImgCutShow', '90%', '100%');
        }
    }, function (e) {
        console.log( "取消选择图片" );
    }, {filter:"image"} );
});
//上传照片
hui('#uploadNow').click(function(){
    hui.centerLoading();
    var res = huiImgCuterPlay();
    if(res){
        //读取照片数据准备上传
        var canvas = document.getElementById('huiCanvas');
        var data = canvas.toDataURL();
        hui.post(
            '服务器端地址',
            {pd:data},
            function(data){
                hui.centerLoading(true);
                console.log(data);
            }
        );
    }else{
        hui.centerLoading(true);
    }
});
</script>
</body>
</html>


相关教程
CopyRight © 2011 - 2016 Hcoder.net 陕ICP备14004669号-2
客服QQ : 1265928288
mui的App开发实战教程《有道词典》已发布!
总计10节:
1、入口页面布局子页面布局
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发(涵盖:下拉刷新、上拉加载等知识点)
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时,包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识!
收费50元,有经济困难的在校学生可以联系客服 1265928288 进行优惠(不是勿扰)。
购买方式,腾讯课堂:
https://ke.qq.com/course/194834

资料包包含:源码、素材、文字资料,购买后即可下载! 观看时候选择超清模式,代码清晰可见!