在web端快速实现选区截图功能（region-screenshot-js）

最新推荐文章于 2025-03-24 18:59:20 发布

子禾丶

最新推荐文章于 2025-03-24 18:59:20 发布

阅读量2.6k

点赞数 13

分类专栏： GIS可视化文章标签：前端 javascript

本文链接：https://blog.csdn.net/beforeSend/article/details/139121781

版权

前言

👉👉👉👉在线demo👈👈👈👈

本文介绍如何通过插件region-screenshot-js来简洁高效的在web端实现选区截图功能，并在截图上绘制出特定图案和马赛克，如果插件自带图案绘制不能满足你的需求，你可以通过插件的customDrawing配置项来自定义绘制。以下仅做基础示意，更多功能和用法请参见文档。这是我在工作之余开发的插件，近两千行代码，写了小两月。对于该插件的有任何建议或意见，可以在Issues里提出。如果有帮助到你，请点个star。

1.引入插件并创窗出建截图工具

—— region-screenshot-js支持在多个环境下使用，本文通过原生html来演示：

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