JS+CSS3手写滤镜，皮一下还是很开心的
用原生JS写了一个关于图片预览和调色，并保存调色之后的图片。
首先，先在css中设置默认的初始滤镜，使用css3中的filter特性：
#img{
-webkit-filter: grayscale(0%) brightness(100%) contrast(100%) saturate(100%);
filter: grayscale(0%) brightness(100%) contrast(100%) saturate(100%);
}
html
【JS+CSS3手写滤镜，皮一下还是很开心的】
文章图片
html页面 在js中添加预览函数：
//图片预览
function preview(file){
const img = document.getElementById('img');
if(file.files && file.files[0]){
const reader = new FileReader();
reader.onload = function(evt) {
img.src = https://www.it610.com/article/evt.target.result;
};
reader.readAsDataURL(file.files[0]);
}
console.log(file.files , file.files[0]);
}
上传图片预览如下：
文章图片
预览图片 之后，再做图片调整：
//图片调整
function changeImg(){
const img = document.getElementById("img");
let grayscale = document.getElementById("grayscale").value,
brightness = document.getElementById("brightness").value,
contrast = document.getElementById("contrast").value,
saturate = document.getElementById("saturate").value;
img.style.webkitFilter = "grayscale("+grayscale+"%) brightness("+brightness+"%) contrast("+contrast+"%) saturate("+saturate+"%)";
img.style.filter = "grayscale("+grayscale+"%) brightness("+brightness+"%) contrast("+contrast+"%) saturate("+saturate+"%)";
}
//数值调整
function changeValue(type){
let valBlock,val;
if(type === 1){
valBlock =document.getElementById("grayscaleText");
val = document.getElementById("grayscale").value;
}else if(type === 2){
valBlock =document.getElementById("brightnessText");
val = document.getElementById("brightness").value;
}else if(type === 3){
valBlock =document.getElementById("contrastText");
val = document.getElementById("contrast").value;
}else if(type === 4){
valBlock =document.getElementById("saturateText");
val = document.getElementById("saturate").value;
}
valBlock.innerHTML = val + '%';
changeImg();
}
文章图片
调整滤镜之后的图片 想保存调整好之后的图片，就需要用canvas的toDataURL生成一张新的图片用作下载保存，格式是base64，并且将这个新生成的图片的url存在一个a标签上。
//下载图片
function download(url, fullName){
const a_url = document.createElement('a');
a_url.href = https://www.it610.com/article/url;
a_url.setAttribute('download', fullName);
a_url.click();
}
//保存图片滤镜
function copyImg(imgNode, format = 'png', quality = 0.97){
const canvas = document.createElement('canvas');
canvas.width = imgNode.width;
canvas.height = imgNode.height;
const context = canvas.getContext('2d');
context.filter = getComputedStyle(imgNode).filter;
imgNode.setAttribute('crossOrigin', 'anonymous');
context.drawImage(imgNode, 0, 0, canvas.width, canvas.height);
const url = canvas.toDataURL(`image/${format}`, quality);
return {
url,
then: (cb) => {
cb(url)
},
download: (name = '修改后的图片') => {
download(url, `${name}.${format}`)
}
}
}const img = document.getElementById('img');
//点击保存
function downloadImg(){
copyImg(img).download();
copyImg(img).then((url) => {
console.log(url);
});
}
如此就将修改后的图片保存下来了
文章图片
图片对比 以上です。
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示
- OpenGL|OpenGL ES之LUT（滤镜基准图）
- spring5源码系列--循环依赖|spring5源码系列--循环依赖 之 手写代码模拟spring循环依赖
- 手写我心day12
- vue的mvvm原理解析及手写一个
- 手写我心day15
- 根本不需要滤镜，身边处处是惊喜
- JMeter手写脚本，及注意事项。
- 2018-11-30买家秀里，看到的是真实世界，还是笑话滤镜
- 自己写一个pow()函数