前端小功能：图片对比度。
前端小功能：图片对比度。
图片对比度
css，filter已经实现很多图片的功能了，抛弃IE，及一些不潮流的浏览器，直接使用css属性就好了。
filter: contrast(${contrastNum})
无奈如果要兼容IE的话，就是最新版IE11，这些css都没有效果
百度都是用
progid:DXImageTransform.Microsoft处理，但是我实在是不会搞，怎么试都没有效果，找不到具体的官网，很文档。哎自己实在太弱了。
只好用canvas处理一下了，记录一下，比较很少用到的吧。以后就不要兼容IE了
示例：
先缓存图片，ajax，保持图片源不被污染，IE禁止通过Image跨域请求图片
只好用canvas处理一下了，记录一下，比较很少用到的吧。以后就不要兼容IE了
示例：
先缓存图片，ajax，保持图片源不被污染，IE禁止通过Image跨域请求图片
function handleGetBlob(baseUrl) { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest() xhr.open('GET', baseUrl, true) xhr.responseType = 'blob' xhr.onload = function(option:any) { let res = option.target if (res.status === 200) { const bloburl = window.URL.createObjectURL(res.response) resolve(bloburl) }else{ reject(baseUrl) } } xhr.send() }) } function handleGetImage(baseUrl) { return new Promise((resolve) => { const image = new Image(); image.src = baseUrl; image.onload = function() { resolve(image) } }) }
然后再用canvas装换图片对比度就好了
async function contrastImage(image, contrast){ if(!HTMLCanvasElement.prototype.toBlob){ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { value:function(callback,type,quality){ // eslint-disable-next-line @typescript-eslint/no-this-alias let canvas = this; setTimeout(function () { let binStr = atob(canvas.toDataURL(type, quality).split(',')[1]); let len = binStr.length; let arr = new Uint8Array(len); for (let i = 0; i < len; i++) { arr[i] = binStr.charCodeAt(i); } callback(new Blob([arr], { type: type || 'image/png' })); }); } }); } return new Promise((resolve, reject) => { try { let canvas = document.createElement('canvas'); if (canvas.getContext) { let ctx = canvas.getContext('2d'); canvas.height = image.height; canvas.width = image.width; ctx.drawImage(image, 0, 0); let imageD = ctx.getImageData(0, 0, image.width, image.height); let pdata:any = imageD.data; const cont = (Number(contrast)/10) const avg = 127; for (let i = 0; i < pdata.length; i+=4) { let r = pdata[i] let g = pdata[i+1] let b = pdata[i+2] // pdata[i] = r + contrast; // pdata[i + 1] = g + contrast; // pdata[i + 2] = b + contrast; if((r+(r-avg)*cont)>255){ pdata[i]=255; }else if((r+(r-avg)*cont)<0){ pdata[i]=0; }else { pdata[i] = r+(pdata[i+1]-avg)*cont; } if((g+(g-avg)*cont)>255){ pdata[i+1]=255; }else if((g+(g-avg)*cont)<0){ pdata[i+1]=0; }else { pdata[i+1] = g+(g-avg)*cont; } if((b+(b-avg)*cont)>255){ pdata[i+2]=255; }else if((b+(b-avg)*cont)<0){ pdata[i+2]=0; }else { pdata[i+2] = b+(b-avg)*cont; } } ctx.putImageData(imageD, 0, 0); canvas.toBlob(function(blob) { const bloburl = window.URL.createObjectURL(blob) resolve(bloburl) }); canvas = null; } } catch (error) { reject(contrastUrl) } }) }
处理导出的是URL，直接绑定img就可以了。
注释部分，是图片亮度的显示方式。
推荐一下，图片处理Javascript的文章: https://blog.csdn.net/phg1024/article/details/16332711
继续推荐一下：https://www.cnblogs.com/fsjohnhuang/p/4127888.html#a7
https://www.cnblogs.com/jwm1999/p/13056344.html
async function contrastImage(image, contrast){
if(!HTMLCanvasElement.prototype.toBlob){
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value:function(callback,type,quality){
// eslint-disable-next-line @typescript-eslint/no-this-alias
let canvas = this;
setTimeout(function () {
let binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
let len = binStr.length;
let arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {
type: type || 'image/png'
}));
});
}
});
}
return new Promise((resolve, reject) => {
try {
let canvas = document.createElement('canvas');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
canvas.height = image.height;
canvas.width = image.width;
ctx.drawImage(image, 0, 0);
let imageD = ctx.getImageData(0, 0, image.width, image.height);
let pdata:any = imageD.data;
const cont = (Number(contrast)/10)
const avg = 127;
for (let i = 0; i < pdata.length; i+=4) {
let r = pdata[i]
let g = pdata[i+1]
let b = pdata[i+2]
// pdata[i] = r + contrast;
// pdata[i + 1] = g + contrast;
// pdata[i + 2] = b + contrast;
if((r+(r-avg)*cont)>255){
pdata[i]=255;
}else if((r+(r-avg)*cont)<0){
pdata[i]=0;
}else {
pdata[i] = r+(pdata[i+1]-avg)*cont;
}
if((g+(g-avg)*cont)>255){
pdata[i+1]=255;
}else if((g+(g-avg)*cont)<0){
pdata[i+1]=0;
}else {
pdata[i+1] = g+(g-avg)*cont;
}
if((b+(b-avg)*cont)>255){
pdata[i+2]=255;
}else if((b+(b-avg)*cont)<0){
pdata[i+2]=0;
}else {
pdata[i+2] = b+(b-avg)*cont;
}
}
ctx.putImageData(imageD, 0, 0);
canvas.toBlob(function(blob) {
const bloburl = window.URL.createObjectURL(blob)
resolve(bloburl)
});
canvas = null;
}
} catch (error) {
reject(contrastUrl)
}
})
}
没有终点，没有彼岸，坚持就好，愿岁月如初
没有终点，没有彼岸，坚持就好，愿岁月如初
