实现前端代码复制文字内容

6 篇文章 0 订阅
2 篇文章 0 订阅
function copyGroupId(groupId) {
  //创建一个新元素,“input”可复制成功,但是会丢失样式样式,改为textarea,可保持样式复制
  //let oInput = document.createElement("input");
  let oInput = document.createElement("textarea");
  //给新元素赋值
  oInput.value = groupId;
  //添加新元素到页面body中
  document.body.appendChild(oInput);
  //选择对象
  oInput.select();
  //对选择对象的值进行复制到浏览器中
  document.execCommand("Copy");
  // this.$message.success(groupId);
  console.log("复制成功");
  //删除新节点(重置操作)
  document.body.removeChild(oInput);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现这个功能需要分为两个部分:1. 图片文字识别;2. 复制文字并带选中的光标提示。 1. 图片文字识别 在前面的回答中已经提到,可以使用OCR技术来实现图片中的文字识别。OCR技术可以将图片中的文字转换成计算机可识别的文本,然后我们可以将这个文本显示到页面上。 2. 复制文字并带选中的光标提示 复制文字可以使用`document.execCommand('copy')`来实现,但是这个方法只能复制纯文本,无法复制图片中的文字。因此,我们可以借助一个第三方库,例如`clipboard.js`,它可以实现复制HTML内容,并且支持复制图片中的文字。 至于光标提示,可以使用CSS的`::selection`伪类来实现。我们可以给需要复制的文本添加一个`::selection`样式,这样在用户选中文本时就会出现选中文本的样式,从而达到光标提示的效果。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复制图片中的文字</title> <style> /* 选中文本的样式 */ ::selection { background-color: #0078D7; color: #fff; } </style> </head> <body> <img src="image.jpg" id="img"> <div id="text"></div> <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script> <script> // 图片文字识别 const img = document.getElementById('img'); const text = document.getElementById('text'); Tesseract.recognize(img.src) .then(result => { text.innerText = result.text; }); // 复制文字并带选中的光标提示 const clipboard = new ClipboardJS('#text'); clipboard.on('success', function(e) { e.clearSelection(); }); </script> </body> </html> ``` 在这个示例中,我们使用了`Tesseract.js`库来实现图片文字识别,使用`clipboard.js`库来实现复制文本,并且添加了一个`::selection`样式来实现光标提示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值