在網路上看到教人調整影像的一些參數來做出某種風格的照片. 忽然靈機一動想用ChatGPT來做. 因為它不能寫出大型複雜的程式, 所以我就把功能拆分幾個獨立的單元, 其中一個就是調整亮度. 我再加上一些簡單的使用者介面, 讓使用者可以看到參數或是下載圖片. 沒想到ChapGPT最後一氣呵成寫出來. 我覺得非常滿意.
程式我放在 https://cardteck.com/wp/adjustBrightness.html. 可以直接執行.
它的亮度調整公式就是把R,G,B都加上你要增減的數字brightness.
function adjustBrightness() {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const brightness = Number(brightnessInput.value);
for (let i = 0; i < data.length; i += 4) {
data[i] += brightness; // 調整紅色通道
data[i + 1] += brightness; // 調整綠色通道
data[i + 2] += brightness; // 調整藍色通道
}
ctx.putImageData(imageData, 0, 0);
}brightness是來自可以改變輸入範圍的的滑桿, 我要它顯示數值在旁邊, 它也做到了.
// 更新亮度值顯示
brightnessInput.addEventListener('input', function () {
brightnessValue.textContent = brightnessInput.value;
});圖片調整後,要可以讓人下載, 它也完成了.
// 將Canvas的影像資料轉換成可下載的檔案格式
canvas.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.style.display = 'block';
}, 'image/png');javascript在網頁裡都可以看到,完整程式我就不寫了. 我用下面這張圖來實驗.
將亮度加50後得到新圖.
ChatGPT花幾秒鐘就完成的功能很有趣吧.
