likaia / js-screen-shot Goto Github PK

View Code? Open in Web Editor NEW

726.0 6.0 98.0 2.31 MB

web端自定义截图插件(原生JS版)

Home Page: https://www.kaisir.cn/js-screen-shot/

License: MIT License

JavaScript 5.53% SCSS 4.63% TypeScript 89.26% HTML 0.58%

electron javascript screenshot typescript web-screenshot js-screen-shot

js-screen-shot's Introduction

Hey，I'm MagicalProgrammer. Chinese introduction please move 👉 README-CN

Hello， I'm MagicalProgrammer ，was born in 2000，A front-end development engineer with 4 years of work experience。

You may be curious about my experience. Normally speaking, it is impossible to have such a long work experience. This matter is a long story, interested developers please go to: A 19-year-old programmer's self-study road

💬 If you are interested in me, you can add me line for further communication.
📫 my email address: [email protected];
📝 My jue-jin (Open Source Community) Homepage

Technology stack and development tools:

Company project experience:

I am mainly responsible for the development and optimization of the core module of the web-side animation editor in the company. Some of the main achievements are:：

Integrate the analysis of materials in apng format, and write a set of apng-to-canvas library (support playback control and specified frame jump)
Implement the search function of the svg text component in the canvas, and solve the problem that the browser does not support the search for svg text type elements by default
Implemented the function of exporting draft content in the editor to PDF to support users' printing needs
Responsible for the architecture design and development of a set of node middle-tier services that modify the draft content through the API within the company (using nest for implementation)

The online address of the project：

Personal website and technical community:

In my spare time, I will summarize what I have learned into articles and post them to the Nuggets technology community. At present, I have written more than 100 articles, with a total reading volume of 900,000+ and a total of 9000+ likes.

I'm looking for a job recently, if you think I'm pretty good, you can give me a chance. 😋

js-screen-shot's People

Contributors

Stargazers

Watchers

Forkers

github-ljrong shenzhim hhy5277 ttttt-t keyzf rio-li woaini521 martin4chen lefthandbeyond bugmygod xintao222 wellssu0 jeromehan linjiyou hzq-up ueumd bruce-yangs duheng webstager lucifer-zhu lancersung sfltf zxhhhh123 yangxin1994 robinbiao feiafeiafeia wangzhengbo chenhailong118 penn6699 dut3062796s linecode andygoo aafrontend lingtal-fork moeyc 294153753 sparkinzy littersnaker sujiewen zhirongyuan chris-han liyumingben toobeloong crackercat solardiax jackshawn mucpsing kxjl168 why-is-42 jiegangwu nukeluke sheerli yuyime iotale jinxiaochuan lengjunt zbangbang terminator-39 wanglu119 bhagawatdongre suckitfa zkcpps gtiger666 luthe-futian xuebingchuan jsyluo chenhuan1992 kunger309 jinjinhrb lynnwenhuan hxlxmjxbbxs marlontao1 zhennann ahui333666 lwd-temp jacobruan library-develop panstar jianshen-weo evilkong jintiannimoyulema hellolib youxiuchen sakura1225 sulgweb zhucl1006 hepingmogul miludedeng qq137321 qlijunjie qiyx2019 fisher-zh zhangtaiwei rocyuan666

js-screen-shot's Issues

能否增加一个初始剪裁框的配置选项

当前情况下是得需要拖动鼠标才能出现裁剪框，能否增加一个初始剪裁框的配置选项，在一进入页面时就自动生成裁剪框，出现在页面正**，框的大小有默认值，而且也支持配置

运行dist下的html文件,实例化对象,报错document.body 为null

工具栏（元素id：toolPanel 和 optionPanel）纵向超出是我使用的问题吗

iframe空白

iframe部分截图时显示空白

可以添加到剪贴板吗？

截图点击确认勾选后，可以自动添加到剪贴板吗？就像微信截图那样，可以把图片直接发给别人

screenShotPlugin.umd.js这个文件在哪

我的项目无法联网，不支持vue，想知道怎么使用webrct截屏，感谢

如何解决dpr的问题？

不知道应该在那个地方去设置这个dpr

引入组件后，与自身代码冲突

引入组件后，与自身代码冲突，报错“对象不支持”finally“属性或方法

靠近ie会变的不幸

工具栏的操作，能在选区外编辑，边界情况没有做检测？

是否可以默认截取全屏

一进页面默认截取全屏，然后在界面上涂鸦

使用html2canvas截图，百度地图不显示

用矩形绘制的时候蒙层会消失，多次绘制矩形，之前绘制的矩形会消失

用矩形绘制的时候蒙层会消失，多次绘制矩形，之前绘制的矩形会消失咋办呀

大佬，有个错误提示帮忙看看啊

截图聊天头像和一些图标icon出不来

作者，可以请问下截图时聊天头像和一些图标icon出不来？是啥原因。是使用js截屏那个包

fix: 截图效果不正确

注意看 button 的边缘在截图时被改变了。

期望效果

得到效果

环境

复现步骤

运行下面的代码
点击 点我，再点击 勾 确定图标
在浏览器控制台中打开 callback 回调的 base64

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/screenShotPlugin.umd.js"></script>
  <title>屏幕截图</title>
</head>
<body>
  <button id="btn">点我</button>
  <div>
    <button>一个按钮</button>
    <p>这是一些其他元素……</p>
  </div>
  <script>
    btn.onclick = () => {
      // 截图确认按钮回调函数
      const callback = (base64) => {
        console.log(`callback`, base64)
      }
      // 截图取消时的回调函数
      const closeFn = () => {
        console.log(`closeFn`)
      }
      new screenShotPlugin({ enableWebRtc: false, completeCallback: callback, closeCallback: closeFn })
    }
  </script>
</body>
</html>

webrtc截图的功能感觉没有实时播放选中的窗口的内容

开启 clickCutFullScreen 全屏时，工具栏错位了，急

开启 clickCutFullScreen 全屏时，在工具栏上，随便点开一个箭头或者框框，主工具栏，就会被顶走，然后，就回不来了，而且，选择颜色的，也显示不全。。。

如果可以的话，建议给工具栏加一个拖动功能，全屏时，可以随意拖动的，避免被挡住要操作的地方。
不过，如果拖动工具栏，那么，工具栏下的配置栏，在显示时，也要跟随改变位置。

另外，输入文本那个，不能修改文本颜色吗？

能否增加按比例来调整裁剪框大小的功能

在初始化时指定裁剪框的长宽比，调整裁剪框时按照比例来调整，最后裁剪出的图片长宽比是固定的

html2canvas模式蒙层加载慢

大神，如题，该模式下从点击截图到黑色蒙版显示到窗口中，需要5秒左右怎么搞？给人的感觉是，点了截图，没反应一样。然后等5秒，黑色蒙版出来了。。

取消分享又回调事件吗

现在是点击截图，然后又想”取消“，想在“取消”的时候做一些操作。能否把取消分享的回调事件暴露出来？

截图的时候，截的图和出来的base64里的内容大小不同

比如我要截上图这么多，但是出来的却是

是我用的姿势不对么？

  new ScreenShort({
    enableWebRtc :false,
    completeCallback : this.completeCallback,
    closeCallback : this.closeCallback,
    level : 99,
    canvasWidth :0,
    canvasHeight :0
  });

imgSrc 参数配置

        new ScreenShot({
          enableWebRtc: false,
          imgSrc: canvas.toDataURL('image/png'),
        })

使用这个配置后，在截图界面，传入的图片和原页面截图都能看到。能否实现在截图界面只显示传入图片，将原页面截图隐藏起来？

裁剪框尺寸信息显示问题

当裁剪菜单出现在裁剪框下面时，裁剪框尺寸信息能正常显示在裁剪框左上角；
但裁剪框菜单如果出现在裁剪框上方，裁剪框尺寸信息就不显示了

编辑状态取消不了

html2canvas来截图，编辑状态没法退出

使用webrtc模式截屏，蒙层中会有鼠标残留

求解vue2上不能用这个吗？为什么点击截图显示要分享的屏幕？

页面有滚动条时，蒙层位置错误，并且截图位置错误

1.在页面有滚动条的情况下，蒙层还始终定位在左上角，没有跟随滚动条自动定位到浏览器可视窗口内

2.在页面有滚动条，使用的是canvas2html模式，点击蒙层区域开始截图时，画布会吧整个页面的内容都集中在长宽为一屏的蒙层范围内，使的蒙层内的页面内容挤压，导致本来要截图的位置和蒙层生成原来点击的位置，页面内容不同

          // 截图确认按钮回调函数
            const callback = (base64) =>{
                console.log(base64);
            }

            // 截图取消时的回调函数
            const closeFn = ()=>{
                console.log("截图窗口关闭");
                stopBodyScroll(false)
            }
            new screenShotPlugin({
                enableWebRtc: false,
                completeCallback: callback,
                closeCallback: closeFn,
                loadCrossImg: true,
            });

截图被压缩了，救救孩子吧

页面元素超过一屏时，画面会挤压

示例代码

截图

		<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li>85</li><li>86</li><li>87</li><li>88</li><li>89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li>95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li></ul>
	</div>
	
	<script src="./screenShotPlugin.umd.js"></script>
	
	<script>
	
		// 截图确认按钮回调函数
	    const callback = (base64) =>{
	      console.log(base64);
	    }
	    // 截图取消时的回调函数
	    const closeFn = ()=>{
	      console.log("截图窗口关闭");
	    }
		
		function screenShotStart(){
			new screenShotPlugin({enableWebRtc: false, completeCallback: callback,closeCallback: closeFn});
		}
	</script>
</body>

可以取消用户选择分享的弹窗吗？

截屏时getDisplayMedia api需要用户选择分享窗口，可以默认当前触发的界面，过滤这步选择弹窗提示吗？

绘制这个截图时，背景图片变得模糊了。而且图片也偏移了

初始化没有做手动选区，能默认给个全屏选区吗？鼠标点击选区外围（遮罩层）工具栏会跟随鼠标点击区发生偏移，能固定在选区下方吗？

如果要在安卓上运行，需要怎么修改？

当缩小浏览器窗口时进行截图，下面的图标样式错乱了

left 的位置计算有问题？？

是否能直接針對特定HTML區塊進行截圖

您好，如標題所示，是否能直接擷取特定區塊，不用透過工具欄操作謝謝

能集成到谷歌浏览器插件进行使用吗？

我运行出来是黑屏，没有显示截图，是还需要其他配置吗？最新版chrome

<title>Document</title>

截图时候会把超出屏幕显示的部分也截进去,导致图片变形,这个咋解决?

截图时会把原有的图片隐藏, 我用的element-ui库

原页面:
截图时的页面:

设置level后，文字标注的输入域看不到。

我的配置

截图时输入效果

输入后，文字失去光标后的效果

还有，enableWebRtc模式的时候，浏览器会弹窗，所以将enableWebRtc设置false，设置后ifream的页面不显示，但是这个ifream页面本身就是允许跨域的，我页面中是也调的通的。
截图前

截图后

ie兼容性问题

定位到11519行
var nodes = path[1].children;
报错
无法获取未定义或nulll饮用的属性“1”

源码里面没有dist目录

只有src 没有dist目录

可选参数里能配置 zIndex吗

当页面中存在 zIndex的时候，你的层级没有设置，建议在配置项里可以自由设置

能否支持自定义键盘事件回调

能否支持自定义键盘事件回调，比如按esc的时候，关闭截图

Take screenshot of visible part

I want to take the screenshot of the visible part directly on button click and then allow editing of the screenshot. How can I achieve this?

使用初始化的裁剪框cropBoxInfo 报错

在使用初始化的裁剪框cropBoxInfo时，如果不拖动裁剪框直接点确认按钮，就会报下面的异常：
screenShotPlugin.common.js:12767 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. at saveCanvasToBase64 (http://localhost/ui/accident/app.js:123863:21) at getCanvasImgData (http://localhost/ui/accident/app.js:123920:16) at toolClickEvent (http://localhost/ui/accident/app.js:124232:18) at HTMLDivElement.<anonymous> (http://localhost/ui/accident/app.js:124468:13)
如果拖动一下裁剪框，就能正常裁剪