region-screenshot-js helps you quickly build the selection screenshot function

Jun Wei — Fri, 24 May 2024 01:52:16 +0000

live demo:https://github.com/weijun-lab/region-screenshot-js
github:https://weijun-lab.github.io/region-screenshot-js

This article describes how to use the plug-in region-screenshot-js to succinctly and efficiently achieve the selection screenshot function on the web side, and draw specific patterns and mosaics on the screenshot. If the plug-in comes with pattern drawing can not meet your needs, you can customize drawing through the customDrawing configuration item of the plug-in. The following is only a basic indication, more functions and usage refer to the documentation. This is a plug-in I developed in my spare time, nearly two thousand lines of code, writing a little two months. If you have any suggestions or comments about this plugin, you can put them in the Issues. If it helps you, please click on star.

Code example：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            height: 100%;
            width: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(./assets/bg.png);
            background-size: cover;
            background-position: center;
        }
    </style>
</head>

<body>

</body>
<script src="./dist/region-screenshot.umd.js"></script>
<script>
let screenshot = new RegionScreenshot({
    regionColor:"#00ff28"
});
let screenshot = new RegionScreenshot();
screenshot.on("successCreated",(dataUrl)=>{
    console.log("Plugin initialized successfully.");
});
screenshot.on("screenshotGenerated",(dataUrl)=>{
    console.log(dataUrl);
});
</script>

</html>

If the current drawing tool does not meet your needs, you can customize a drawing tool through the customDrawing configuration item

Code example：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            height: 100%;
            width: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(./assets/bg.png);
            background-size: cover;
            background-position: center;
        }
        .region-screenshot_custom_tools.emoji .region-screenshot_tools_btn {
            background-image: url(./assets/emoji.png);
        }

        .region-screenshot_custom_tools.emoji.region-screenshot_active .region-screenshot_tools_btn {
            background-image: url(./assets/emoji_active.png);
        }

        .region-screenshot_custom_tools.emoji .region-screenshot_tools_options img {
            width: 20px;
            margin-right: 10px;
            cursor: pointer;
        }

        .region-screenshot_custom_tools.emoji .region-screenshot_tools_options img.active {
            filter: brightness(1.2)
        }
    </style>
</head>

<body>

</body>
<script src="./dist/region-screenshot.umd.js"></script>
<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
<script>
    let screenshot = new RegionScreenshot({
        customDrawing: [
            {
                className: "emoji",
                optionsHtml: `
                        <img class="active" src="assets/emoji-1.png"/>
                        <img src="assets/emoji-2.png"/>
                        <img src="assets/emoji-3.png"/>
                        <img src="assets/emoji-4.png"/>
                    `,
                onOptionsCreated(optionsEl) {
                    $(optionsEl)
                        .find("img")
                        .click(function () {
                            $(this).addClass("active");
                            $(this).siblings().removeClass("active");
                        });
                },

                onDrawingOpen(canvasEl, optionsEl, saveCallback) {
                    let ctx = canvasEl.getContext("2d");
                    canvasEl.style.cursor = "crosshair";
                    canvasEl.onclick = function (e) {
                        let img = $(optionsEl).find(".active")[0];
                        ctx.drawImage(
                            img,
                            e.offsetX - img.naturalWidth / 2,
                            e.offsetY - img.naturalWidth / 2
                        );
                        saveCallback();
                    };
                },
                onDrawingClose(canvasEl,optionsEl) {
                    canvasEl.onclick = null;
                    canvasEl.style.cursor = "default";
                },
            },
        ],
    });


</script>

</html>

emoji.png

emoji_active.png

emoji-1.png

emoji-2.png

emoji-3.png

emoji-4.png

DEV Community: Jun Wei

region-screenshot-js helps you quickly build the selection screenshot function