Javascript: преобразуем цветную картинку к оттенкам серого (Grayscale)

Побочный продукт другой работы, выложу, чтобы не пропадал. Сервис позволяет загрузить графический файл из файловой системы компьютера и преобразовать его к серому (Grayscale) изображению. Любой современный браузер позволяет сохранить преобразованный файл, щёлкнув на нём правой кнопкой мыши и выбрав пункт меню "Сохранить картинку как...", "Сохранить изображение как..." и т. п. (название пункта зависит от браузера).

Файл сервиса в работе и исходник без обрамления HTML (на момент написания) показаны далее, исходник можно вставить в документ .html в нужной кодировке.

 Преобразование рисунка в оттенки серого онлайн, откройте ссылку в текущем окне (вкладке) (2 Кб)

<div align="center">
 <form method="post" enctype="multipart/form-data">
   <p>Рисунок: <input type="file" id="file1">
   <input type="button" id="button1" value="Обработать">
   </p>
 </form>
 <canvas id="imgCanvas1" width="600" height="600" style="background-color: #999999;">
  Извините, канва недоступна в вашем браузере
 </canvas>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript">
  var img1;
  var canvas1;
  var ctx1;
  var loaded1 = false;
  var img1_width, img1_height;

  function grayscaleImage (canvasContext,imgW,imgH) { //Преобразование канвы в GrayScale
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
    for (var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
  }

  $("#file1").change (function (e) {
   var URL = window.webkitURL || window.URL;
   var url = URL.createObjectURL(e.target.files[0]);
   img1 = new Image();
   canvas1 = document.getElementById('imgCanvas1');
   img1.src = url;
   img1.onload = function() {
    canvas1.width = img1_width = img1.width; 
    canvas1.height =img1_height = img1.height;
    ctx1 = canvas1.getContext('2d');
    ctx1.fillStyle="#FFFFFF"; 
    ctx1.fillRect (0, 0, canvas1.width, canvas1.height);
    ctx1.drawImage (img1, 0, 0, img1_width, img1_height);
    loaded1 = true;
   }
  });
  $("#button1").click (function (e) {
    if (!loaded1) {
     alert ('Загрузите файл!'); return;
    }
    var grayscaleResults = grayscaleImage (ctx1, img1_width, img1_height); 
    img1.src = grayscaleResults;
  });
 </script>
 <noscript><div>Извините, требуется включённый Javascript для работы приложения!</div></noscript>
</div>

18.03.2019, 11:37 [1742 просмотра]