改变图片的颜色

    1. aPix = oImgData.data;
    2. for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
    3.     aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    4. }
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    10. <body>
    11.     <canvas id="bricks" width="100px" height="100px"></canvas>
    12.     <script>
    13.         const canvas = document.getElementById('bricks')
    14.         var dataURL = canvas.toDataURL()
    15.         console.log('dataURL', dataURL)
    16.     </script>
    17.     <hr />
    18.     <img class="grayscale" crossorigin=''
    19.         src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3413156137,1378410039&fm=26&gp=0.jpg"
    20.         alt="Description of my picture" />
    23.     <script>
    24.         window.addEventListener("load", removeColors);
    26.         function showColorImg() {
    27.             this.style.display = "none";
    28.             this.nextSibling.style.display = "inline";
    29.         }
    31.         function showGrayImg() {
    32.             this.previousSibling.style.display = "inline";
    33.             this.style.display = "none";
    34.         }
    36.         function removeColors() {
    37.             var aImages = document.getElementsByClassName("grayscale"),
    38.                 nImgsLen = aImages.length,
    39.                 oCanvas = document.createElement("canvas"),
    40.                 oCtx = oCanvas.getContext("2d");
    41.             for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
    42.                 oColorImg = aImages[nImgId];
    43.                 nWidth = oColorImg.offsetWidth;
    44.                 nHeight = oColorImg.offsetHeight;
    45.                 oCanvas.width = nWidth;
    46.                 oCanvas.height = nHeight;
    47.                 oCtx.drawImage(oColorImg, 0, 0);
    48.                 oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    49.                 aPix = oImgData.data;
    50.                 nPixLen = aPix.length;
    51.                 for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
    52.                     aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    53.                 }
    54.                 oCtx.putImageData(oImgData, 0, 0);
    55.                 oGrayImg = new Image();
    56.                 oGrayImg.src = oCanvas.toDataURL();
    57.                 oGrayImg.onmouseover = showColorImg;
    58.                 oColorImg.onmouseout = showGrayImg;
    59.                 oCtx.clearRect(0, 0, nWidth, nHeight);
    60.                 oColorImg.style.display = "none";
    61.                 oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
    62.             }
    63.         }
    64.     </script>
    65. </body>
    67. </html>