MUI——图片反码转换并保存本地或相册中

最新推荐文章于 2022-06-19 12:53:18 发布
最新推荐文章于 2022-06-19 12:53:18 发布
阅读量456 收藏
点赞数
分类专栏： mui-app混合app、插件开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38322527/article/details/115873397
版权
本文介绍了一种使用HTML5 Canvas技术实现图片反转的方法，并详细解释了如何通过JavaScript操作Canvas上下文来达到反转效果，包括从相册选取图片、进行反转处理及保存至相册的完整流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

前言

最开始发现，css样式中有一个标签，可以实现图片的反码转换。filter: invert(100%);可以反色转换，但却发现再MUI中，修改标签的属性，却并未变更。

document.getElementById("img").style.invertSelection ="invert(100%)"; //无效

后来考虑使用canvas画布技术。

使用到的技术

  • canvas 画布
  • plus.gallery.pick 相册获取图片
  • plus.nativeObj.Bitmap H5+ 原生技术

代码案例

<!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 href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.imageup {
				height: 400px;
				width: 95%;
				margin: 10px;
			}
			
			.normal {
				filter: invert(0%);
			}
			
			.inverted {
				filter: invert(100%);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">反码识别</h1>
		</header>
		<div class="mui-content">
			<!--<img id="img" src=""  class="imageup" style="margin: 10px 10px;">-->
			<canvas id="myCanvas" class="imageup"></canvas>
			<div class="mui-row" style="margin-top: 50px;">
				<div class="mui-col-xs-4 mui-text-center">
					<button id="getLocalPhoto" type="button" class="mui-btn mui-btn-block mui-btn-primary" style="display: block;">识别本地图片</button>
				</div>
				<div class="mui-col-xs-1"></div>
				<div class="mui-col-xs-3 mui-text-center">
					<button id="fanse" type="button" class="mui-btn mui-btn-block mui-btn-primary" style="display: block;">反转图片</button>
				</div>
				<div class="mui-col-xs-1"></div>
				<div class="mui-col-xs-3 mui-text-center">
					<button id="save" type="button" class="mui-btn mui-btn-block mui-btn-primary" style="display: block;">保存图片</button>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var imgPath;
			mui.init();
			mui.plusReady(function() {
				document.getElementById("getLocalPhoto").addEventListener("tap", function() {
					console.log("6666");
					plus.gallery.pick(function(path) {
						console.log("success -- path = " + path);
						imgPath = path;
						//document.getElementById("img").src=path;
						// 放置图片
						drawImages(path);

					}, function(err) {
						mui.alert("Failed: " + err.message, "温馨提示", "确定", function() {}, "div");
					});
				})

				document.getElementById("fanse").addEventListener("tap", function() {
					console.log("fanse");
					// 获取画布
					var oContent = document.getElementById("myCanvas").getContext('2d');
					// 获取图片
					var imgData = oContent.getImageData(0, 0, 400, 400);
					console.log("imgData-->" + JSON.stringify(imgData));
					var data = imgData.data;
					console.log("data-->" + data);
					for(var i = 0; i < data.length; i += 4) {
						data[i] = 255 - data[i];
						data[i + 1] = 255 - data[i + 1];
						data[i + 2] = 255 - data[i + 2];
					}
					//处理完之后，再次输出
					oContent.putImageData(imgData,0,0);
				})
				
				document.getElementById("save").addEventListener("tap",function(){
					console.log("---save---");
					var oContent = document.getElementById("myCanvas");
					// 获取图片
					var imgUrl = oContent.toDataURL("image/png");
					console.log("save-->"+imgUrl);
					console.log("save-->"+imgUrl.base64Data);
					var base64Url = imgUrl.substring(imgUrl.indexOf("base64,")+7,imgUrl.length);
					console.log("base64-->"+base64Url);
					var bitmap = new plus.nativeObj.Bitmap("fanzhuan");
					bitmap.loadBase64Data(base64Url,function(){
						//file:///storage/emulated/0/DCIM/Camera/a.jpg
						bitmap.save("_doc/a.jpg", {
			                overwrite: false
			           }, function(i) {
			                console.log('保存图片成功：'+JSON.stringify(i));
			            }, function(e) {
			                console.log('保存图片失败：' + JSON.stringify(e));
			            });
					},function(e){
						console.log("error---"+JSON.stringify(e));
					})
					
				})
			})

			// 向画布中填充图片
			function drawImages(path) {
				// 获取画布
				var oC = document.getElementById("myCanvas");
				console.log("oc_width="+oC.width);
				console.log("oc_height="+oC.height);
				var oContent = oC.getContext('2d');
				var imgs = new Image();
				imgs.src = path;
				imgs.onload = function() {
					console.log("*****");
					// 缩放
					oContent.drawImage(imgs, 0, 0,oC.width/2,oC.height);
					//var imageData = oContent.getImageData(0, 0, 600, 600);
					//console.log("imageData-->" + JSON.stringify(imageData));
					var bg = oContent.createPattern(imgs,'no-repeat');
			  		oContent.fillStyle = bg;
			  		// x,y坐标点位   width.height 数据
			  		//oContent.fillRect(0, 0, 100, 100);
				}
			}
		</script>
	</body>

</html>

测试效果

  • 获取原始图片
    在这里插入图片描述

  • 反转操作
    在这里插入图片描述

  • 保存图片
    在这里插入图片描述

保存相册代码逻辑

如果需要保存相册，则需要做如下代码优化：

document.getElementById("save").addEventListener("tap", function() {
	console.log("---save---");

	var oContent = document.getElementById("myCanvas");
	// 获取图片
	var imgUrl = oContent.toDataURL("image/png");
	console.log("save-->" + imgUrl);
	//console.log("save-->"+imgUrl.base64Data);
	var base64Url = imgUrl.substring(imgUrl.indexOf("base64,") + 7, imgUrl.length);
	console.log("base64-->" + base64Url);
	var bitmap = new plus.nativeObj.Bitmap();
	bitmap.loadBase64Data(base64Url, function() {
		//file:///storage/emulated/0/DCIM/Camera/a.jpg
		bitmap.save("_doc/a.jpg", {
			overwrite: false
		}, function(e) {
			console.log('保存图片成功：' + JSON.stringify(e));
			// 保存至相册
			saveToGallery(e.target);
		}, function(e) {
			console.log('保存图片失败：' + JSON.stringify(e));
		});
		// 释放资源
		bitmap.recycle();
	}, function(e) {
		console.log("error---" + JSON.stringify(e));
	})
})

// 保存至相册
function saveToGallery(path) {
	console.log(path)
	plus.gallery.save(path, function(e) {
		console.log(JSON.stringify(e));
	}, function(err) {
		console.log("保存到相册失败：" + JSON.stringify(err));
	});
}

方法或缩小(模拟双指动作)

<!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 href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.imageup {
				height: 400px;
				width: 95%;
				margin: 10px;
				border: 1px solid #d3d3d3;
				background: #ffffff;
			}
			
			.normal {
				filter: invert(0%);
			}
			
			.inverted {
				filter: invert(100%);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">反码识别</h1>
		</header>
		<div class="mui-content">
			<!--<img id="img" src=""  class="imageup" style="margin: 10px 10px;">-->
			<canvas id="myCanvas" class="imageup"></canvas>
			<div class="mui-input-row mui-input-range">
			    <input type="range" id="slider"  min="0.01" max="10.0" step="0.01" value="1.2" style="display: block;" >
			</div>

			<div class="mui-row" style="margin-top: 50px;">
				<div class="mui-col-xs-4 mui-text-center">
					<button id="getLocalPhoto" type="button" class="mui-btn mui-btn-block mui-btn-primary" style="display: block;">识别本地图片</button>
				</div>
				<div class="mui-col-xs-1"></div>
				<div class="mui-col-xs-3 mui-text-center">
					<button id="fanse" type="button" class="mui-btn mui-btn-block mui-btn-primary" style="display: block;">反转图片</button>
				</div>
				<div class="mui-col-xs-1"></div>
				<div class="mui-col-xs-3 mui-text-center">
					<button id="save" type="button" class="mui-btn mui-btn-block mui-btn-primary" style="display: block;">保存图片</button>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var imgPath;
			var imgsPiblic; //全局，供save操作使用
			mui.init();
			mui.plusReady(function() {
				document.getElementById("getLocalPhoto").addEventListener("tap", function() {
					console.log("6666");
					imgsPiblic = null;
					plus.gallery.pick(function(path) {
						console.log("success -- path = " + path);
						imgPath = path;
						//document.getElementById("img").src=path;
						// 放置图片
						drawImages(path);

					}, function(err) {
						mui.alert("Failed: " + err.message, "温馨提示", "确定", function() {}, "div");
					});
				})
				
				document.getElementById("slider").addEventListener("change",function(e){
					console.log(JSON.stringify(e));
					
					if(imgsPiblic == null){
						return;
					}
					let scaleInput = this.value;
					console.log(scaleInput);
					var oContent = document.getElementById("myCanvas");
					var ctx = oContent.getContext("2d");
					ctx.clearRect(0, 0, oContent.width, oContent.height);
			        ctx.save();
			        ctx.translate((oContent.width / 2 - imgsPiblic.width / 2 * scaleInput), (oContent.height / 2 - imgsPiblic.height / 2 * scaleInput));
			        ctx.scale(scaleInput, scaleInput);
			        ctx.drawImage(imgsPiblic, 0, 0);
			        ctx.restore();
					
				})

				document.getElementById("fanse").addEventListener("tap", function() {
					console.log("fanse");
					// 获取画布
					var oContent = document.getElementById("myCanvas").getContext('2d');
					console.log("oContent.width, oContent.height->" + oContent.width + " " + oContent.height);
					// 获取图片
					var imgData = oContent.getImageData(0, 0, oContent.width, oContent.height);
					console.log("imgData-->" + JSON.stringify(imgData));
					var data = imgData.data;
					//console.log("data-->" + data);
					for(var i = 0; i < data.length; i += 4) {
						data[i] = 255 - data[i];
						data[i + 1] = 255 - data[i + 1];
						data[i + 2] = 255 - data[i + 2];
					}
					//处理完之后，再次输出
					oContent.putImageData(imgData, 0, 0);
				})

				document.getElementById("save").addEventListener("tap", function() {
					console.log("---save---");

					var oContent = document.getElementById("myCanvas");
					// 获取图片
					var imgUrl = oContent.toDataURL("image/jpg");
					console.log("save-->" + imgUrl);
					//console.log("save-->"+imgUrl.base64Data);
					var base64Url = imgUrl.substring(imgUrl.indexOf("base64,") + 7, imgUrl.length);
					console.log("base64-->" + base64Url);

					var bitmap = new plus.nativeObj.Bitmap();
					var uuids = getUUIDs();
					console.log("uuids="+JSON.stringify(uuids));
					bitmap.loadBase64Data(base64Url, function() {
						//file:///storage/emulated/0/DCIM/Camera/a.jpg
						bitmap.save("_downloads/"+uuids+".jpg", {
							overwrite: false,
							quality:100 //最高清晰度
						}, function(e) {
							console.log('保存图片成功：' + JSON.stringify(e));
							// 保存至相册
							saveToGallery(e.target);
						}, function(e) {
							console.log('保存图片失败：' + JSON.stringify(e));
						});
						// 释放资源
						//bitmap.recycle();
					}, function(e) {
						console.log("error---" + JSON.stringify(e));
					})

				})
			})
			function getUUIDs(){
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
			        return v.toString(16);
			    });
			}
			// 保存至相册
			function saveToGallery(path) {
				console.log(path)
				plus.gallery.save(path, function(e) {
					console.log("保存相册成功："+JSON.stringify(e));
				}, function(err) {
					console.log("保存到相册失败：" + JSON.stringify(err));
				});
			}
			// 向画布中填充图片
			function drawImages(path) {
				// 获取画布
				var oC = document.getElementById("myCanvas");
				console.log("oc_width=" + oC.width);
				console.log("oc_height=" + oC.height);
				var oContent = oC.getContext('2d');
				var imgs = new Image();
				imgs.src = path;
				imgs.onload = function() {
					console.log("*****");
					console.log("-->" + imgs.width + " ," + imgs.height);
//					var scale = 1.2;
//					oContent.width = imgs.width * scale;
//					oContent.height = oC.height * scale; // 计算等比缩小后图片
//					oContent.drawImage(imgs, 0, 0, imgs.width, oC.height); // 加载图片

					var scale = 1.2;
					var tt = 1000; // 可以根据具体的要求去设定
					if(oC.width > tt || oC.height > tt) {
						if(oC.width > oC.height) {
							scale = tt / oC.width;
						} else {
							scale = tt / oC.height;
						}
					}
					oContent.width = oC.width * scale;
					oContent.height = oC.height * scale; // 计算等比缩小后图片
					oContent.drawImage(imgs, 0, 0, oContent.width, oContent.height); // 加载图片


					imgsPiblic = imgs;
				}
			}
		</script>
	</body>

</html>
mui+html5+实现拍照保存相片到手机相册
我爱吃红薯的博客
07-05 1157
例：一个页面有一个拍照的按钮，点击出现拍照功能，拍照后确定照片，照片回显到页面上，并把照片保存到相册中。 代码：
保存图片到本地相册
02-05
保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地保存图片到本地
websql在mui中实现本地存储
gc025的专栏
11-12 459
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新沂市实验学校</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobi.
移动端开发框架mui之文件下载及打开（excel文件）
zgphacker2010的专栏
06-19 2198
移动端开发框架mui之文件下载及打开（excel文件）
MUI所需涉及文件--h5
07-20
MUI所需涉及文件--h5
MUI入门
qq_35367566的博客
03-12 998
官方地址：https://dev.dcloud.net.cn/mui/ MUI介绍： 其官网上写到：最接近原生APP体验的高性能前端框架。 特点： 轻量 追求性能体验，轻量是重要特征。 MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K 快速体验： 官方推荐： 推荐使用软件：Hbuilder。 具体创建步骤：选择文件，新建“移动APP”，并选择“Hello MUI”...
MUI H5+长按图片下载至本地相册源码示例
09-20
在这个场景中，"MUI H5+长按图片下载至本地相册源码示例"是一个实用的功能，允许用户通过长按图片的方式将其保存到手机的本地相册中。这个功能对于社交媒体、电商平台或者任何涉及到图片分享的应用都非常重要，因为...
MUI H5+实现长按图片保存至相册功能
长按图片并保存至本地相册是移动设备上常见的一项操作，对于提升用户体验具有重要意义。 ### MUI框架简介 MUI是一种遵循移动端最佳实践的前端解决方案，它提供了一套完整的UI组件和丰富的开发工具。MUI框架让...
Vue+mui实现图片的本地缓存示例代码
08-27
Vue+mui实现图片的本地缓存示例代码 ...本篇文章提供了一个使用Vue+mui实现图片的本地缓存的实例代码，代码中使用了mui框架的plus对象和Vue框架的mutations概念，演示了如何将图片缓存在本地，并提供了错误处理机制。
mui图片裁切（拍照、从相册上传）上传实现
03-27
可以设置`<input type="file">`来让用户选择本地图片，或者通过`mui`的`plus photopicker`组件从手机相册中选取。 ```html 图片"> 选择图片 上传裁剪后的图片 *" style="display: none;"> ``` 在JavaScript部分...
MUI开发大全
zgphacker2010的专栏
08-22 804
相关学习资料网址 MUI文档：http://dev.dcloud.net.cn/mui/ui/ MUI问答社区：http://ask.dcloud.net.cn/explore/category-3 HTML5+ API文档：http://www.html5plus.org/doc/zh_cn/android.html HTML5+ API缓存：http://www.dcloud.io/docs/api/zh_cn/cache.html h.js：http://www.hcoder.net/h
HTML5规范的本地存储
04-11
HTML5规范的本地存储
神奇的记事本
Viper的专栏
10-08 6020
最初发表在我的QQ空间，见：http://user.qzone.qq.com/31731705/blog/1317393693 记事本是Windows系统上的老程序了，它的历史几乎和Windows一样久，其实，平凡的它也是一个神奇的程序。在Win7上，将c:\windows\s
java-js知识库之十四——vue使用mui开发
这是个什么的博客
01-06 585
一、下载mui文件 mui下载地址 二、vue引入mui 2.1 文件迁入 mui-master下载完成后，将mui-master\dist\目录下的文件夹放入vue项目中 本人在src目录下新建了mui目录，将css、fonts和js三个文件夹放入在该目录下。 2.2 修改webpack.config.js 在rules数组下最后一项增加 |ttf ，因为引入的mui文件包含.ttf文件 t...
HBuilder Mui保存网络图片到本地(APP)
Sage的博客
07-18 984
博客地址：https://www.sage.run/archives/97.html
mui 下载图片到本地
qq_22945453的博客
03-26 836
/* *下载文件 * objId--下载文件的id * downloadUrl--下载路径 * */ function downloadFile(downloadUrl) { ...
MUI 读写本地存储
iwusan
03-30 9691
localStorage.setItem("Name","张三");//设置 localStorage.getItem("Name");//获取
mui HTML5 plus 下载文件
热门推荐
张营的技术博客
05-28 1万+
mui HTML5 plus下载文件
删除某目录下所有文件
花落的csdn博客
03-14 930
能不能删除文件夹还不知道   function deleteAll($path) {         $op = dir($path);         while(false != ($item = $op->read())) {             if($item == '.' || $item == '..') {                 con
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值