mui：裁剪图片

最新推荐文章于 2022-10-12 22:00:06 发布

mkmin

最新推荐文章于 2022-10-12 22:00:06 发布

阅读量1.7k

点赞数

分类专栏： mui 文章标签： jcrop mui 截取

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/81135644

版权

mui 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

首先，感谢万能的博客。以及万能的百度，搜索了比较多的材料。才找到个人觉得比较合适的剪裁工具

首先，粘贴下材料的来源：https://download.csdn.net/download/u014466109/10465677，需要一个c币就足够了。这也是比较良心的，再次感谢那位大佬

直接放上改后的那个文件：

首先用到的插件，建议大家在那个页面里面找。毕竟我自己上传的话也是需要收c币的，所以还是直接用人家的好点，

<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<img style="width: 160px;height: 90px;" src="" id="showimg" />
		<button>点击</button>
	</body>
	<script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script>
		mui.init({
			url: 'f.html',
			id: 'f.html',
		});
		window.addEventListener("updateHeadImg", update_head_img); //添加自定义事件，其他页面调用
		//更新用户头像
		function update_head_img(e) {
			$("#showimg").attr("src", e.detail.img);
			
			console.log(e.detail.img);

		}
		mui.plusReady(function() {
			console.log(plus.webview.currentWebview().id);
			$("body").on("click", "button", function() {
				if(mui.os.plus) {
					var a = [{
						title: "拍照"
					}, {
						title: "从手机相册选择"
					}];
					plus.nativeUI.actionSheet({
						title: "修改头像",
						cancel: "取消",
						buttons: a
					}, function(b) {
						switch(b.index) {
							case 0:
								break;
							case 1:
								getImage();
								break;
							case 2:
								galleryImg();
								break;
							default:
								break;
						}
					})
				}
			});

		});
		//拍照
		function getImage() {
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					cutImage(entry.toLocalURL());
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(s) {
				console.log("error" + s);
			}, {
				filename: "_doc/head.jpg"
			})
		}
		//相册
		function galleryImg() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) { //entry为图片原目录（相册）的句柄
					cutImage(entry.toLocalURL());
				}, function(e) {
					console.log("读取图片错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};
		//裁剪图片
		function cutImage(path) {
			plus.nativeUI.showWaiting("正在处理中...", {
				back: "none",
			});
			//裁剪之前压缩一下效率更高
			plus.zip.compressImage({
				src: path,
				dst: '_doc/zip_' + path.substr(path.lastIndexOf('/') + 1),
				overwrite: true,
				quality: 50,
				height: "50%",
			}, function(zip) {
				plus.nativeUI.closeWaiting();
				mui.openWindow({
					url: 'cropper.html',
					id: 'cropper',
					extras: {
						path: zip.target,
					},
					show: {
						aniShow: 'zoom-fade-in',
						duration: 800
					},
					waiting: {
						autoShow: false
					}
				});
			}, function() {
				plus.nativeUI.closeWaiting();
				mui.toast('压缩失败！');
			})
		}
	</script>

</html>

这个页面的作用有两个，一个是触发获取图片。是去获取图片的。还有一个功能，是去显示图片

需要的包。建议大家自己去找

接下来是第二个：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>裁剪头像</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="lib/cropper.css" />
		<link rel="stylesheet" href="lib/mui.min.css" />
		<style type="text/css">
			body {
				background-color: #000000;
			}
			
			#cropper-example-1 {
				background-color: #000000;
				height: 93%;
				width: 100%;
				position: absolute;
			}
			
			.divbut {
				width: 100%;
				text-align: center;
				position: fixed;
				z-index: 2;
				bottom: 0px;
				background-color: #000000;
				height: 7.5%;
				line-height: 50px;
			}
			
			.divbut>div:first-child {
				float: left;
				width: 20%;
			}
			
			.divbut>div:last-child {
				float: right;
				width: 20%;
			}
			
			img#im {
				height: 100%;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div id="cropper-example-1" class="mui-hidden">
			<img id="im" alt="Picture" />
		</div>

		<div class="divbut">
			<div>
				<p id="quxiao" >取消</p>
			</div>
			<div>
				<p id="xuanqu" >确定</p>
			</div>
		</div>
		<img src="" alt="" class="mui-hidden" id="im_exif" />

		<script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="lib/mui.min.js"></script>
		<script type="text/javascript" src="lib/exif.js"></script>
		<script type="text/javascript" src="lib/cropper.min.js"></script>
		<script type="text/javascript" src="lib/fastclick.js"></script>
		<script type="text/javascript" src="lib/app.js"></script>

		<script>
			$(function() {
				//尽量用一下fastclick
				FastClick.attach(document.body);
				! function() {
					var i = {
						aspectRatio: 1 / 1
					};
				}()
			});

			(function(c) {
				var Cro = function() {}
				c.extend(Cro.prototype, {
					orientation: null,
					urldata: null,
					view: null,
					num: 0,
					sbx: null,
					sby: null,
					n: 0,
					onReady: function() {
						var that = this;
						mui.init();
						that.bindEvent();
						that.view = plus.webview.currentWebview();

						var img = document.getElementById("im_exif");
						img.src = that.view.path;
						img.addEventListener("load", function() {
							//exif调整图片的横竖
							EXIF.getData(this, function() {
								var orientation = EXIF.getAllTags(this).Orientation;
								$("#im").attr("src", that.loadcopyImg(img, orientation));
								document.getElementById("cropper-example-1").classList.remove("mui-hidden"); //显示裁剪区域
								that.cropperImg();
							});
						})
					},
					cropperImg: function() {
						var that = this;
						$('#cropper-example-1 > img').cropper({
							aspectRatio: 16 / 9,
							autoCropArea: 1,
							strict: true,
							background: false,
							guides: false,
							highlight: false,
							dragCrop: false,
							movable: false,
							resizable: false,
							crop: function(data) {
								that.urldata = that.base64(data);
							}
						});
					},
					loadcopyImg: function(img, opt) {
						var that = this;
						var canvas = document.createElement("canvas");
						var square = 500;
						var imageWidth, imageHeight;
						if(img.width > img.height) {
							imageHeight = square;
							imageWidth = Math.round(square * img.width / img.height);
						} else {
							imageHeight = square; //this.width;
							imageWidth = Math.round(square * img.width / img.height);
						}
						canvas.height = imageHeight;
						canvas.width = imageWidth;
						if(opt == 6) {
							that.num = 90;
						} else if(opt == 3) {
							that.num = 180;
						} else if(opt == 8) {
							that.num = 270;
						}
						if(that.num == 360) {
							that.num = 0;
						}

						var ctx = canvas.getContext("2d");
						ctx.translate(imageWidth / 2, imageHeight / 2);
						ctx.rotate(that.num * Math.PI / 180);
						ctx.translate(-imageWidth / 2, -imageHeight / 2);
						ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
						var dataURL = canvas.toDataURL("image/jpeg", 1);
						return dataURL;
					},
					bindEvent: function() {
						var that = this;
						document.getElementById("quxiao").addEventListener("tap", function() {
							mui.back(); //取消就直接返回
						});
						document.getElementById("xuanqu").addEventListener("tap", function() {
							//触发上一个页面刷新图片事件
							var preView = plus.webview.getWebviewById('HBuilder');
							mui.fire(preView, 'updateHeadImg', {
								'img': that.urldata
							}); //不能保存图片，需要判断上传性，所以选择传值的方式，传递图片,格式为json
							mui.back();
						});
					},
					base64: function(data) {
						var img = document.getElementById("im");
						var canvas = document.createElement("canvas");

						//像素
						canvas.height = 300;
						canvas.width = 300;
						var ctx = canvas.getContext("2d");
						ctx.drawImage(img, data.x, data.y, data.width, data.height, 0, 0, 300, 300);
						var dataURL = canvas.toDataURL("image/jpeg", 0.5); //第二个参数是质量
						return dataURL;
					}
				});

				var cro = new Cro();

				c.plusReady(function() {
					app.log();
					cro.onReady();
				})
			})(mui)
		</script>
	</body>

</html>

这个作用主要是先压缩，然后再截取后再转化，实际上的核心是jcrop

还是那句：核心代码请去那儿找

当然，建议大家自己去多试试

mkmin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
mui：裁剪图片

首先，感谢万能的博客。以及万能的百度，搜索了比较多的材料。才找到个人觉得比较合适的剪裁工具首先，粘贴下材料的来源：https://download.csdn.net/download/u014466109/10465677，需要一个c币就足够了。这也是比较良心的，再次感谢那位大佬直接放上改后的那个文件：首先用到的插件，建议大家在那个页面里面找。毕竟我自己上传的话也是需要收c币的，所以还...
复制链接

扫一扫