本文介绍了一种使用HTML5 Canvas技术实现图片反转的方法，并详细解释了如何通过JavaScript操作Canvas上下文来达到反转效果，包括从相册选取图片、进行反转处理及保存至相册的完整流程。
前言
最开始发现，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>
扫一扫
1163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
