kamranahmedse/driver.js – скрипт для фокусировки элемента на странице

kamranahmedse/driver.js - скрипт для фокусировки элемента на странице

Может использоваться например для затемнение фона, когда пользователь взаимодействует с каким-либо компонентом, как это делает Facebook, когда вы пытаетесь создать публикацию, используя его в качестве переключателя фокуса, чтобы привлечь внимание пользователя к какому-либо компоненту на странице, или использовать его для имитации виджетов «Выключить свет», которые вы могли видеть в онлайн-плейерах и т. д.

Driver.js написан на Vanilla JS, не имеет зависимостей и легко настраивать.
https://github.com/kamranahmedse/driver.js

NickPiscitelli/Glider.js – js быстрая, легкая альтернатива карусели с естественной прокруткой

NickPiscitelli/Glider.js - js быстрая, легкая альтернатива карусели с естественной прокруткой

Glider.js родился из-за разочарования по поводу каруселей, особенно на мобильных устройствах.

Вдохновленный известным Slick.js, Glider.js стремится стать быстрой, легкой, отзывчивой, незамеченной, свободной от каруселей альтернативой.
Glider.js не является настоящей каруселью, в ней отсутствует определяющая функция карусели, бесконечный цикл.

Без поддержки зацикливания,Glider.js сохраняет возможность использовать встроенную прокрутку, создавая естественный вид на любых устройствах с сенсорным экраном, при этом обеспечивая базовую эстетику и функциональность карусели (отлично подходит для настольных компьютеров!)
https://github.com/NickPiscitelli/Glider.js

tehnokv/picojs – js технология распознавания лиц

На JS написанная функция распознавания лица, как утверждает автор вмещается в 200 строк кода.

tehnokv/picojs - js технология распознавания лиц

Скрипт позволяет распознаванать лица по фото так и в реальном режиме онлайн. Смотрите примеры.
https://github.com/tehnokv/picojs

Функция CROP изображения на JS

/**
 * @param {string} url - The source image
 * @param {number} aspectRatio - The aspect ratio
 * @return {Promise<HTMLCanvasElement>} A Promise that resolves with the resulting image as a canvas element
 */
function crop(url, aspectRatio) {
    
    // we return a Promise that gets resolved with our canvas element
    return new Promise(resolve => {

        // this image will hold our source image data
        const inputImage = new Image();

        // we want to wait for our image to load
        inputImage.onload = () => {

            // let's store the width and height of our image
            const inputWidth = inputImage.naturalWidth;
            const inputHeight = inputImage.naturalHeight;

            // get the aspect ratio of the input image
            const inputImageAspectRatio = inputWidth / inputHeight;

            // if it's bigger than our target aspect ratio
            let outputWidth = inputWidth;
            let outputHeight = inputHeight;
            if (inputImageAspectRatio > aspectRatio) {
                outputWidth = inputHeight * aspectRatio;
            } else if (inputImageAspectRatio < aspectRatio) {
                outputHeight = inputHeight / aspectRatio;
            }

            // calculate the position to draw the image at
            const outputX = (outputWidth - inputWidth) * .5;
            const outputY = (outputHeight - inputHeight) * .5;

            // create a canvas that will present the output image
            const outputImage = document.createElement('canvas');

            // set it to the same size as the image
            outputImage.width = outputWidth;
            outputImage.height = outputHeight;

            // draw our image at position 0, 0 on the canvas
            const ctx = outputImage.getContext('2d');
            ctx.drawImage(inputImage, outputX, outputY);
            resolve(outputImage);
        };

        // start loading our image
        inputImage.src = url;
    })
    
}

Пример использования

crop('path/to/our/image.jpeg', 1)
crop('path/to/our/image.jpeg', 16/9)
crop('path/to/our/image.jpeg', 16/9).then(canvas => {
  // `canvas` is the resulting image
})
const canvas = await crop('path/to/our/image.jpeg', 16/9)
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. ...
  11. 114
Scroll Up