Get started with pica CDN

MIT licensed

Pica: library for browsers - resize, crop, edit images.

Tags:
  • resize
  • scale
  • image
  • lanczos
  • canvas

Stable version

Copied!

How to start using pica CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with pica CDN - cdnhub.io</title>
    <script src="https://cdn.cdnhub.io/pica/9.0.1/pica.min.js"></script>
</head>
<body>
    <button id="resize-btn">Resize Image</button>
    <img id="input-image" src="input.jpg" alt="Input Image">
    <img id="output-image" src="" alt="Output Image">

    <script>
        const resizeButton = document.getElementById('resize-btn');
        const inputImage = document.getElementById('input-image');
        const outputImage = document.getElementById('output-image');

        resizeButton.addEventListener('click', () => {
            const width = 200; // Desired width
            const height = 200; // Desired height
            const inputImageDataURL = inputImage.src;

            Pica.load().then((pica) => {
                const outputImageDataURL = pica.resize(inputImageDataURL, width, height).toDataURL();
                outputImage.src = outputImageDataURL;
            });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions