先说说背景
公司项目要实现一个网页截图，识别文字的功能
思路很简单，前端实现截图，并把图片发送给后台，后台通过调用某度的ocr识别，识别出来文字，然后返回给前段展示。
身为前端的我，技术点也就在实现截图了。

先在网上查了查网页截图的插件。发现清一色推荐html2canvas
原理就是通过canvas截图截全屏，再通过鼠标点击位置，移动距离，抬起位置，重新在新图片上，截图新的图片，并返回base64图片

然后用了这个方法，历尽艰辛又解决了图片跨域问题，鼠标反向截图问题，以及新增一个可视化选框，最终返回一个base64的图片，本来沾沾自喜皆大欢喜的时候，发现一个致命问题。html2canvas对屏幕分辨率较高的屏幕不兼容，出现了各种选取不准的问题。本来在大显示器上可以，但是只要换到比较新的笔记本上都不行，而且跟屏幕宽度没关系，反复测试发现只要屏幕分辨路大于两千就会出现这个问题。

最后无奈的放弃这个插件，推荐一款非常好用的插件:

kscreenshot

上代码

npm install kscreenshot --save

import kscreenshot from 'kscreenshot'

 <el-button type="warning" @click="ocrPic" icon="el-icon-camera">开始截图</el-button>ocrPic() {new kscreenshot({key: 65,needDownload: false,endCB(e) { //截图成功回调console.log(e)},cancelCB(e) { //截图失败回调console.log(e)}}).startScreenShot()},

代码到这里结束
后期开发过过程中发现两个坑：
1.在线预览pdf文件时，无法截图（主要原因是ifream外部加载的资源会跨域）
2.图片旋转截图，图片位置会发生变化。
结论。楼主无法解决～～～

前端实现网页选区截图功能相关推荐

前端js代码实现截图功能
前端js代码实现截图功能据我所知,屏幕截图大致可以分为两种类型. 一种是真-屏幕截图,也就是我们平常QQ,微信,钉钉等社交工具里面所用到的截图.也就是说它能把我们看到的东西截取下来,所见即所得. 另 ...
前端如何实现一键截图功能?
精彩回顾有点意思的gif动图生成平台开发实战(二) 如何实现H5可视化编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化 ...
电脑qq浏览器怎么滚动截长图_Mac系统如何轻松实现网页长截图功能
Mac 网页长截图在日常工作生活中,我们经常需要使用到截图功能,简单的一页截图使用常用的截图工具即可,但是有时会碰到需要截图多页内容或者整个网页,使用截图工具分页截图再拼接不仅复杂而且耗时. 那么针 ...
java div截图_Html网页DIV截图功能
需求及前提: (1) 将web网页展示的某些图表,导出为图片保存: (2) 图表可能是Canvas的(使用H5绘图组件生成的或者自己Draw的),也可能是div组合出来的: 方案1: 使用html2c ...
android截取网页图片,安卓版谷歌浏览器很快将获得滚动截图功能可以用来截取整个网页...
截图功能对用户来说应该是非常常用的功能,然而有时候截取网页时可能需要我们进行多次截图再拼接截图图片. 为解决这种问题现在已经有些软件提供滚动截图功能,滚动截图可帮助用户一次性将整个网页内容截图无需拼接 ...
javascript在网页中实现粘贴qq截图功能
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图.旺旺截图或者其它截图软件.具体代码如下. <!DOCTYPE HTM ...
Leaflet框选截图网页框选截图 -- 类似QQ截图功能
Leaflet框选截图网页框选截图 -- 类似QQ截图功能功能需求搜索资源功能拆分进阶功能结束语实现截图(红框中即是将要截取的内容) 下载到本地的截图功能需求近日. 项目中有一需求: ...
浏览器-在网页中使用自定义截图功能
总结一下目前了解到的网页截图功能实现一 dom-to-image 1 npm地址: https://www.npmjs.com/package/dom-to-image 2 介绍: dom-to-i ...
html制作qq注册页面代码截图,javascript在网页中实现粘贴qq截图功能
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图.旺旺截图或者其它截图软件.具体代码如下. 利用 clipboardData ...

前端实现网页选区截图功能

kscreenshot

前端实现网页选区截图功能相关推荐

最新文章

热门文章