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多种动画效果加载图片

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注