출처

app.js

$(window).load(function() {
    $("img").each(function() {

        // キャンバスに画像を描画する
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();
        img.src = $(this).attr("src");
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // 画像の各ピクセルをグレースケールに変換する
        var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for (var y = 0; y < pixels.height; y++) {
            for (var x = 0; x < pixels.width; x++) {
                var i = (y * 4) * pixels.width + x * 4;
                var rgb = parseInt((pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 3, 10);
                pixels.data[i] = rgb;
                pixels.data[i + 1] = rgb;
                pixels.data[i + 2] = rgb;
            }
        }
        ctx.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);

        // 画像を差し替える
        $(this).attr("src", canvas.toDataURL());
    });
});

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/app.js"></script>
    <title>Image to Grayscale</title>
</head>
<body>
    <p><img src="img/photo_1.jpg"></p>
    <p><img src="img/photo_2.jpg"></p>
    <p><img src="img/photo_3.jpg"></p>
</body>
</html>

결과

Reference

이 문제에 관하여(Canvas를 사용하여 이미지를 회색조로 변환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okuchan/items/2def6bc5169b36da9161

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다