DEV Community

Cover image for region-screenshot-js helps you quickly build the selection screenshot function
Jun Wei
Jun Wei

Posted on

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

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.

Image description

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>

Enter fullscreen mode Exit fullscreen mode

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

Image description
Code example:

Image description

<!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>


Enter fullscreen mode Exit fullscreen mode

emoji.png emoji.png

emoji_active.png emoji_active.png

emoji-1.png emoji-1.png

emoji-2.png emoji-2.png

emoji-3.png emoji-3.png

emoji-4.png emoji-4.png

Top comments (0)