食品营销型网站,广东省广州市白云区,宁德做网站的公司,西安建站模板厂家方法一#xff1a;
原理#xff1a;
使用canvas进行滤镜操作#xff0c;通过改变图片数据每个像素点的RGB值来提高图片亮度。
缺点
当前项目使用的是svg#xff0c;而不是canvas
调整出来的效果不是很好#xff0c;图片不是高亮#xff0c;而是有些发白
效果 代码 …方法一
原理
使用canvas进行滤镜操作通过改变图片数据每个像素点的RGB值来提高图片亮度。
缺点
当前项目使用的是svg而不是canvas
调整出来的效果不是很好图片不是高亮而是有些发白
效果 代码
body高亮input typerange idexposureRange min-50 max50 value0span idexposureValueBox0/spanbrinput typefile idfileInput acceptimage/*canvas idcanvas/canvasscriptconst exposureRange document.getElementById(exposureRange);const fileInput document.getElementById(fileInput);const exposureValueBox document.getElementById(exposureValueBox);const canvas document.getElementById(canvas);const ctx canvas.getContext(2d);let originalImageData;let exposureValue;exposureRange.addEventListener(input, function (event) {exposureValue parseInt(exposureRange.value);exposureValueBox.innerHTML exposureValuehighlightImage(exposureValue);});fileInput.addEventListener(change, function (event) {var file event.target.files[0];var reader new FileReader();reader.onload function (event) {var img new Image();img.onload function () {canvas.width img.width;canvas.height img.height;ctx.drawImage(img, 0, 0);originalImageData img;}img.src event.target.result;}reader.readAsDataURL(file);});function highlightImage(brightnessValue 0) {const img originalImageData.cloneNode(); // 使用原始图像的副本const imgCanvas document.createElement(canvas);const imgCtx imgCanvas.getContext(2d);imgCanvas.width img.width;imgCanvas.height img.height;imgCtx.drawImage(img, 0, 0);const imageData imgCtx.getImageData(0, 0, imgCanvas.width, imgCanvas.height);const data imageData.data;for (let i 0; i data.length; i 4) {data[i] clamp(data[i] brightnessValue, 0, 255); // Red channeldata[i 1] clamp(data[i 1] brightnessValue, 0, 255); // Green channeldata[i 2] clamp(data[i 2] brightnessValue, 0, 255); // Blue channel}imgCtx.putImageData(imageData, 0, 0);ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(imgCanvas, 0, 0);}function clamp(value, min, max) {return Math.min(Math.max(value, min), max);}/script
/body
方法二
原理
通过使用svg滤镜feColorMatrix基于转换矩阵对颜色进行变换每—像素的颜色值都经过矩阵计算出新颜色改变图片每个像素的颜色值来提高图片亮度。
优点
当前代码使用svg渲染图片操作对象也是svg
准确的提高图片亮度而不是给图片加白
效果 代码
bodyinput typerange idbrightnessRange min0 max2000 value1000brsvg idsvgCanvas width450 height300!-- filter定义一个svg滤镜容器 id用于标识滤镜 --filter idbrightnessFilter!-- feColorMatrixsvg滤镜类型 --feColorMatrix typematrix values1 0 0 0 00 1 0 0 00 0 1 0 00 0 0 1 0//filterimage idimage width450 height300 xlink:hreflaohu.png filterurl(#brightnessFilter)/image/svgscriptconst brightnessRange document.getElementById(brightnessRange);const image document.getElementById(image);const filter document.getElementById(brightnessFilter);brightnessRange.addEventListener(input, adjustBrightness);function adjustBrightness() {const brightnessValue parseFloat(brightnessRange.value);applyBrightnessAdjustment(brightnessValue);}function applyBrightnessAdjustment(brightnessValue) {const matrixValues [brightnessValue / 100, 0, 0, 0, 0,0, brightnessValue / 100, 0, 0, 0,0, 0, brightnessValue / 100, 0, 0,0, 0, 0, 1, 0];filter.querySelector(feColorMatrix).setAttribute(values, matrixValues.join( ));}/script
/body
