HTML5 MUI 手机预览图片，裁剪上传base64，保存数据库

时间：2024-11-19 07:47:18

app和网站页面都可以使用

需要的文件：

这些都需要，这些文件在下文的参考网址可以下载

页面头部引用：

    

  1. 

    

    <link rel="stylesheet" href="js/imagecropper/" />
    

    2. 

  2. 

    

    <link rel="stylesheet" href="js/imagecropper/" />
    

    3.


页面底部引用（但是在body里）：

    

  1. 

    

    
<script type="text/javascript" src="js/jquery-1."></script>

    

    2. 

  2. 

    

    
<script src="js/"></script>

    

    3. 

  3. 

    

    
<script type="text/javascript" src="js/"></script>

    

    4. 

  4. 

    

    
<script type="text/javascript" src="js/imagecropper/"></script>

    

    5. 

  5. 

    

    
<script type="text/javascript" src="js/imagecropper/"></script>

    

    6. 

  6. 

    

    
<script type="text/javascript" src="js/imagecropper/"></script>

    

    7.


布局：

    

  1. 

    

    
<div id="changeAvatar" class="touxiang" οnclick="showActionSheet()">//触发选择图片事件
    

    2. 

  2. 

    

    	<img src="images/">//默认图片以及选择裁剪后展示的效果
    

    3. 

  3. 

    

    </div>
    

    4. 

  4. 

    

    <div style="width:90%;margin: 0 auto;margin-top:30px;">
    

    5. 

  5. 

    

    	<button type="button" class="mui-btn mui-btn-primary mui-btn-block" style="height: 40px;" οnclick="postAvatar()">确认提交</button>//保存数据事件
    

    6. 

  6. 

    

    </div>
    

    7. 

  7. 

    

    <div style="text-align: center;z-index: 99;width: 100%;height: 2000px;background-color: #f2f2f2 ;position: absolute;top:40px;left: 0px;display: none;" id="spinner">
    

    8. 

  8. 

    

    	<div style="width:90px;padding-top:200px;margin:0 auto;height: 100%;">

    

    9. 

  9. 

    

    		<div style="width:30px;float: left;">

    

    10. 

  10. 

    

    			<span class="mui-spinner" style="height: 20px;"></span>//等待动画
    

    11. 

  11. 

    

    		</div>

    

    12. 

  12. 

    

    		<div style="width:60px;float: left;">请稍等...</div>

    

    13. 

  13. 

    

    		<div class="clear"></div>

    

    14. 

  14. 

    

    	</div>

    

    15. 

  15. 

    

    </div>
    

    16. 

  16. 

    

    <div id="showEdit" style="width:100%;height: 100%;background-color: #fff;position: absolute;top:60;left: 0;display: none;z-index: 9;">
    

    17. 

  17. 

    

    	<div id="report" style="width:100%;height: 100%;z-index: 10;">

    

    18. 

  18. 

    

    		<img id="readyimg" style="width:100%;">

    

    19. 

  19. 

    

    	</div>

    

    20. 

  20. 

    

    	<div class="mui-content-padded" style="width:100%;height: 100px;z-index: 110;position: absolute;top:60px;left:0px;">

    

    21. 

  21. 

    

    		<div class="flex-container" style="">

    

    22. 

  22. 

    

    			<a><span class="mui-icon mui-icon-closeempty" οnclick="closepop()"></span></a>//关闭裁剪窗口
    

    23. 

  23. 

    

    			<a><span class="mui-icon mui-icon-undo" οnclick="rotateimgleft()"></span></a>//左旋转90度
    

    24. 

  24. 

    

    			<a><span class="mui-icon mui-icon-redo" οnclick="rotateimg()"></span></a>//右旋转90度
    

    25. 

  25. 

    

    			<a><span class="mui-icon mui-icon-checkmarkempty" οnclick="confirm()"></span></a>//确定
    

    26. 

  26. 

    

    		</div>

    

    27. 

  27. 

    

    	</div>

    

    28. 

  28. 

    

    </div>
    

    29.


JS部分：

    

  1. 

    

    //post内容
    

    2. 

  2. 

    

    
function postAvatar() {
    

    3. 

  3. 

    

    	var petimage = $("#changeAvatar > img").attr("src");//此时取到的图片已经是base64形式

    

    4. 

  4. 

    

            //你的处理代码，改post到服务器了，服务器接收同接收普通post参数一样，只是，存图片的字段改成ntext，这是sql的数据类型，其他数据库同类型，jq的getJSON可能会不执行，因为getJSON是get模式，图片转成base64后，很容易超出最大长度，其实，经过压缩后，一般不会超出的，具体压缩方法下文有

    

    5. 

  5. 

    

    }
    

    6. 

  6. 

    

     
    

    7. 

    

  1. 

    

    //拍照
    

    2. 

  2. 

    

    
function getImage() {
    

    3. 

  3. 

    

    	var cmr = plus.camera.getCamera();
    

    4. 

  4. 

    

    	cmr.captureImage(function(p) {
    

    5. 

  5. 

    

    		plus.io.resolveLocalFileSystemURL(p, function(entry) {
    

    6. 

  6. 

    

    			var localurl = entry.toLocalURL(); //

    

    7. 

  7. 

    

    			$("#report").html('<img src="/static/css/default/img/" data-original="' + localurl + '">');
    

    8. 

  8. 

    

    			cutImg();
    

    9. 

  9. 

    

    			mui('#picture').popover('toggle');
    

    10. 

  10. 

    

    		});
    

    11. 

  11. 

    

    	});
    

    12. 

  12. 

    

    }
    

    13. 

  13. 

    

    //相册选取
    

    14. 

  14. 

    

    
function galleryImgs() {
    

    15. 

  15. 

    

    	plus.gallery.pick(function(e) {
    

    16. 

  16. 

    

    		//alert(e);

    

    17. 

  17. 

    

    		$("#readyimg").attr("src", e);
    

    18. 

  18. 

    

    		cutImg();
    

    19. 

  19. 

    

    		mui('#picture').popover('toggle');
    

    20. 

  20. 

    

    	}, function(e) {
    

    21. 

  21. 

    

    		//outSet( "取消选择图片" );

    

    22. 

  22. 

    

    	}, {
    

    23. 

  23. 

    

    		filter: "image"

    

    24. 

  24. 

    

    	});
    

    25. 

  25. 

    

    }
    

    26. 

  26. 

    

    //照片裁剪类
    

    27. 

  27. 

    

    
function cutImg() {
    

    28. 

  28. 

    

    	$(".mui-content").hide();
    

    29. 

  29. 

    

    	$("#showEdit").fadeIn();
    

    30. 

  30. 

    

    	var $image = $('#report > img');
    

    31. 

  31. 

    

    	$image.cropper({
    

    32. 

  32. 

    

    		checkImageOrigin: true,
    

    33. 

  33. 

    

    		aspectRatio: 1 / 1,
    

    34. 

  34. 

    

    		autoCropArea: 0.3,
    

    35. 

  35. 

    

    		zoom: -0.2

    

    36. 

  36. 

    

    	});
    

    37. 

  37. 

    

    	//					$('zoom',-0.5);

    

    38. 

  38. 

    

    }
    

    39. 

  39. 

    

    //确认照片，展示效果
    

    40. 

  40. 

    

    
function confirm() {
    

    41. 

  41. 

    

    	$("#showEdit").fadeOut();
    

    42. 

  42. 

    

    	var $image = $('#report > img');
    

    43. 

  43. 

    

    	var dataURL = $image.cropper("getCroppedCanvas");
    

    44. 

  44. 

    

    //				var imgurl = ("image/png", 0.5);
    

    45. 

  45. 

    

    	//换成下边的方法，转成jpeg，但是把质量降低，

    

    46. 

  46. 

    

    	//经测试51k的png，转成0.3质量，大小为3k多，0.5质量大小为4k多，

    

    47. 

  47. 

    

    	//这回应该不会出现卡的情况了，

    

    48. 

  48. 

    

    	//既然差别1k多，还是用0.5的质量，还是要兼顾下显示效果的。

    

    49. 

  49. 

    

    	var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
    

    50. 

  50. 

    

    	$("#changeAvatar > img").attr("src", imgurl);
    

    51. 

  51. 

    

    	//				$("#divbtn").show();

    

    52. 

  52. 

    

    	$(".mui-content").show();
    

    53. 

  53. 

    

    }
    

    54. 

  54. 

    

    //旋转照片
    

    55. 

  55. 

    

    
function rotateimg() {
    

    56. 

  56. 

    

    	$("#readyimg").cropper('rotate', 90);
    

    57. 

  57. 

    

    }
    

    58. 

  58. 

    

     
    

    59. 

  59. 

    

    
function rotateimgleft() {
    

    60. 

  60. 

    

    	$("#readyimg").cropper('rotate', -90);
    

    61. 

  61. 

    

    }
    

    62. 

  62. 

    

     
    

    63. 

  63. 

    

    
function closepop() {
    

    64. 

  64. 

    

    	$("#showEdit").fadeOut();
    

    65. 

  65. 

    

    	var $image = $('#report > img');
    

    66. 

  66. 

    

    	$image.cropper('destroy');
    

    67. 

  67. 

    

    	$(".mui-content").show();
    

    68. 

  68. 

    

    }
    

    69. 

  69. 

    

     
    

    70. 

  70. 

    

    
function showActionSheet() {
    

    71. 

  71. 

    

    	var bts = [{
    

    72. 

  72. 

    

    		title: "拍照"

    

    73. 

  73. 

    

    	}, {
    

    74. 

  74. 

    

    		title: "从相册选择"

    

    75. 

  75. 

    

    	}];
    

    76. 

  76. 

    

    	plus.nativeUI.actionSheet({
    

    77. 

  77. 

    

    			cancel: "取消",
    

    78. 

  78. 

    

    			buttons: bts
    

    79. 

  79. 

    

    		},
    

    80. 

  80. 

    

    		function(e) {
    

    81. 

  81. 

    

    			if (e.index == 1) {
    

    82. 

  82. 

    

    				getImage();
    

    83. 

  83. 

    

    			} else if (e.index == 2) {
    

    84. 

  84. 

    

    				galleryImgs();
    

    85. 

  85. 

    

    			}
    

    86. 

  86. 

    

    			//outLine( "选择了\""+((>0)?bts[-1].title:"取消")+"\"");

    

    87. 

  87. 

    

    		}
    

    88. 

  88. 

    

    	);
    

    89. 

  89. 

    

    }
    

    90.



效果图如下：




服务器端

    

  1. 

    

    
string[] arrimg = (';');//img是request['img']取到的完整的base64

    

    2. 

  2. 

    

    img = arrimg[1].Substring(7);//截取字符串

    

    3. 

  3. 

    

    
byte[] arr = Convert.FromBase64String(img);
    

    4. 

  4. 

    

    
string newPath = "Images/" + ("yyyyMMdd") + "/";
    

    5. 

  5. 

    

    
if (!((newPath)))
    

    6. 

  6. 

    

    {
    

    7. 

  7. 

    

        ((newPath));
    

    8. 

  8. 

    

    }
    

    9. 

  9. 

    

    
string filename = () + ".jpg";
    

    10. 

  10. 

    

    ((newPath) + filename, arr);//简单方便，直接另存为

    

    11. 

  11. 

    

    Content = () + "System/Controls/" + newPath + filename;//这里是图片在服务器上的路径，GetRootURI方法在下边

    

    12. 


    

  1. 

    

    public static string GetRootURI()
    

    2. 

  2. 

    

    {
    

    3. 

  3. 

    

        string AppPath = "";
    

    4. 

  4. 

    

        HttpContext HttpCurrent = ;
    

    5. 

  5. 

    

        HttpRequest Req;
    

    6. 

  6. 

    

        if (HttpCurrent != null)
    

    7. 

  7. 

    

        {
    

    8. 

  8. 

    

            Req = ;
    

    9. 

  9. 

    

     
    

    10. 

  10. 

    

            string UrlAuthority = ();
    

    11. 

  11. 

    

            if ( == null ||  == "/")
    

    12. 

  12. 

    

            {
    

    13. 

  13. 

    

                //直接安装在   Web   站点   

    

    14. 

  14. 

    

                AppPath = UrlAuthority + "/";
    

    15. 

  15. 

    

            }
    

    16. 

  16. 

    

            else

    

    17. 

  17. 

    

            {
    

    18. 

  18. 

    

                //安装在虚拟子目录下   

    

    19. 

  19. 

    

                AppPath = UrlAuthority +  + "/";
    

    20. 

  20. 

    

            }
    

    21. 

  21. 

    

        }
    

    22. 

  22. 

    

        return AppPath;
    

    23. 

  23. 

    

    }
    

    24.



参考网址：

/fengyuanchen/cropper/blob/master/

/fengyuanchen/cropper

/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

还有一个对api的详细介绍，网址找不到了，是火狐哪个网页，比较详尽的api实用说明，等找到放上来。

其实就是仔细看api，耐心看英文说明，还有就是不停的实践、多想，终于功夫不负有心人。



相关文章