npm install clipboard --save

<script src="dist/clipboard.min.js"></script>
<button class="btn">
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
 console.info('Action:', e.action);
 console.info('Text:', e.text);
 console.info('Trigger:', e.trigger);
 e.clearSelection();
});
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上！下载并打开 Snipaste，按下 F1 来开始截图，再按 F3，截图就在桌面置顶显示了。就这么简单！

你还可以将剪贴板里的文字或者颜色信息转化为图片窗口，并且将它们进行缩放、旋转、翻转、设为半透明，甚至让鼠标能穿透它们！如果你是程序员、设计师，或者是大部分工作时间都在电脑前，贴图功能将改变你的工作方式、提升工作效率。

Snipaste 使用很简单，但同时也有一些较高级的用法可以进一步提升你的工作效率。

功能强大

• 支持将剪贴板中的以下内容转为图片
• 图像
• 纯文本
• HTML 文本
• 颜色信息
• 图像文件：PNG, JPG, BMP, ICO, GIF 等
• 图片窗口支持的操作
• 缩放 (鼠标滚轮 或者 +/-)
  对于 GIF 图片则是加速/减速
• 旋转 (1/2)
  对于 GIF 图片则是 上一帧/下一帧
• 镜像翻转 (3/4)
• 设置透明度 (Ctrl + 鼠标滚轮 或者 Ctrl+ +/-)
• 鼠标穿透 (X, 取消则按 F4)
• 缩略图 (Shift + 双击)
• 图像标注 (空格键)
• 隐藏 (左键双击)
• ...
• 取色 (Alt)
• 文件拖放
• 贴图分组
• 自动备份、恢复

语言功能

常规：

显示语言功能，界面字体以及主题颜色还可以设置通知栏的图标。

在自定义栏里面功能也是非常丰富的。

方便用户在后期的前途使用，包括各种边框、圆圈、箭头走势增加马赛克，对图片进行保存，复制，返回，撤销，分割，修改颜色，更改边框，粗细设计等等功能。

快速标注

• 丰富的画图工具
• 矩形
• 椭圆
• 线条
• 箭头
• 铅笔
• 马克笔
• 文字
• 高级标注工具
• 马赛克
• 高斯模糊
• 橡皮擦
• 撤销、重做

其他功能

这个软件还有一个非常好的功能，就是它可以自动截图，而且可以非常方便的去做标注。自动识别它的需求部分的一个截图内容。

这个软件分享给大家，希望对你有帮助。

软件下载：Snipaste(截图&贴图)v2.8.8绿色版【附下载】

一篇文章Stimulus：连接HTML和JavaScript的桥梁，实现简单的controller，并学习了Stimulus是如何连接HTML与JavaScript的。现在我们使用Stimulus来实现复制文本到粘贴板的按钮。

比如说，我们现在有一个需求，就是帮助用户生成密码，在密码旁边放置一个按钮，点击按钮后密码就被拷贝到粘贴板上了，这样就方便用户使用这个密码了。

打开public/index.html，修改body内容，填充一个简单的按钮，如下：

<div>
    PIN: <input type="text" value="1234" readonly>
    <button>Copy to Clipboard</button>
</div>

下一步，创建src/controllers/clipboard_controller.js，然后添加一个copy()方法：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    copy() {
    }
}

然后，给div添加data-controller=“clipboard”。只要是给元素添加了data-controller属性，Stimulus就会连接一个controller实例。

<div data-controller="clipboard">

我们还需要一个对输入框的引用，这样我们就可以在调用粘贴板API之前获取输入框的内容。给文本框添加data-clipboard-target=“source“：

PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>

在controller中定义一个target，然后就可以通过this.sourceTarget访问文本框了。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = [ "source" ]
    
    copy() {
    }
}

解释一下这个targets：

当Stimulus加载你的controller类时，它会查看静态数组targets的字符串元素，对于每一个字符串，Stimulus会在controller中添加3个属性。在这里，对于“source”，会添加如下属性：

this.sourceTarget 在controller的域内的第一个source

this.sourceTargets 在controller的域内所有的source组成的一个数组

this.hasSourceTarget 在controller的域内是否有source

我们希望点击按钮时调用controller中的copy()方法，所以我们需要添加data-action=“clipboard#copy“

<button data-action="clipboard#copy">Copy to Clipboard</button>

你可以已经注意到在上面的动作描述符中省略了click->。那是因为Stimulus给button设置了click作为它默认的事件。

某些其他元素也有默认事件。下面是个全部列表：

最终，在copy()方法中，我们获取输入框的内容，调用粘贴板API

copy() {
    navigator.clipboard.writeText(this.sourceTarget.value)
}

刷新页面，点击按钮，然后快捷键粘贴到Greet按钮前到输入框，可以看到1234。

到目前为止，在页面上同一时间只有一个controller实例。在页面上同时有一个controller的多个实例也是很正常的。

我们的controller是可以复用的，只要你需要在页面上添加复制内容的按钮，无论是哪个页面，只要把对应的属性值写好，我们的controller都是生效的。

还是上面的例子，再添加另外一个复制按钮：

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="3737" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>

刷新页面，验证一下两个复制按钮是否都生效。

我们再添加一个可以复制的元素，不用button，我们用a标签，

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="6666" readonly>
    <a href="#" data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</a>
</div>

Stimulus允许我们使用任何元素，只要它设置了合适的data-action属性，就可以触发复制。

这个例子里，要注意一点，点击链接会使浏览器追踪a标签内的href属性跳转，可以取消这种默认行为，只需要在action中调用 event.preventDefault()就可以了。

copy(event) {
    event.preventDefault()    
    navigator.clipboard.writeText(this.sourceTarget.value)
}

还有另外一个方法，拷贝粘贴板上

copy(event) {
    event.preventDefault()    
    this.sourceTarget.select()
    document.execCommand("copy")
}

在本文中，我们看了一个在现实中把浏览器API包装在Stimulus的controller中的例子。还有一个controller的多个实例如何同时出现在页面上，我们还探索了actions和targets如何保持HTML和JavaScript的松散耦合。

下一篇文章，我们将优化一下这个复制粘贴板的功能，让它运行起来更加健壮。

Stimulus：浏览器不支持复制或者弱网条件下，怎么办？