๐ region-screenshot-js helps you quickly build the selection screenshot function
๐ก Newskategorie: Programmierung
๐ Quelle: dev.to
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
<!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/[email protected]/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>