HTML5將彩色照片轉換成黑白照片

2024-09-05 12:19:05

字體：大中小

來源：轉載

供稿：網友

HTML5將彩色照片轉換成黑白照片，HTML5 Canvas特效實例，把一張彩色照片變成黑白色的灰度照片，Canvas與JavaScript結合實現的效果，歡迎參考。

<!DOCTYPE html><html><head><title>HTML5實現彩色照片轉換成黑白照片</title><script type="text/javascript">var canvas,ctx;   function btnConvert_onclick() {    canvas = document.getElementById("myCanvas");    var imgElement=document.getElementById("img");    canvas.width=imgElement.width;    canvas.height=imgElement.height;    ctx = canvas.getContext("2d");    imgElement.onload = function() {        ctx.drawImage(imgElement, 0, 0);        imageConvertToGray();    }    imgElement.src = "/jscss/demoimg/wall_s7.jpg";    document.getElementById("btnSave").disabled="";}function imageConvertToGray() {    var length = canvas.width * canvas.height;    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);    for (var i = 0; i < length * 4; i += 4) {        var myRed = imageData.data[i];        var myGreen = imageData.data[i + 1];        var myBlue = imageData.data[i + 2];        myGray = parseInt((myRed + myGreen + myBlue) / 3);        imageData.data[i] = myGray;        imageData.data[i + 1] = myGray;        imageData.data[i + 2] = myGray;    }    ctx.putImageData(imageData, 0, 0);}      function btnSave_onclick(){    window.location =canvas.toDataURL("image/jpeg"); }</script></head><body><h1>HTML5將彩色照片轉換成黑白照片</h1><img id="img" src="/d/file/p/2024/09-05/01c7603ab706dd0b08055139cf2f0873.jpg"><br/><input type="button" id="btnConvert" value="轉換" onclick="btnConvert_onclick();"/><input type="button" id="btnSave" value="保存圖片" onclick="btnSave_onclick();" disabled/><br/><canvas id="myCanvas" width="200" height="200"/></body></html>

上一篇：html5圖像放大鏡代碼解析+注釋

下一篇：HTML5多種動畫效果加載圖片