图片涂鸦html插件,JS 网页截图、涂鸦

最近因为产品需要，用js写了一个能网页截图并涂鸦的js库(类似QQ 截图工具)。这个库与html2canvas 等类似的库有巨大的差异:html2canvas 只能做到截取“网页”的部分元素类型，而网页之外的内容(浏览器窗口之外)，或者跨域的iframe，java applet 等元素是无法截取的。而我们的需求是要能截取桌面上的任何东西，不限窗口和元素类型，换言之：要做一个类似“QQ 截图工具“的js库来在网页上使用。

所以就只能自己琢磨了,我们的产品用的是dojo，所以我最开始写的是一个dojo的widget，后来又单独写成了一个简易版的jquery的插件，github 地址如下：

如下使用即可：

初始化的参数就是图片上传的相关地址(简易版的后台程序已上传到项目仓库根目录下)，demo 效果如下：

当点击截图后，鼠标状态会变成截图状态，然后拉取桌面的任意一个区域即可：

截取到的区域会“立刻绘制到页面的canvas“(严格来说，图片此时还没有绘制到画布上，后面有介绍) 中，在这里我也添加了一些操作到画布上，比如添加文字、矩形、圆，设置颜色等，如下所示：

各种操作完成之后，点击确定即可：

图片就会插入到编辑框中，查看dom:

如上就是完整的过程，当然，也可以只截图不涂鸦。这里说下相关的注意事项：

前提：

安装一个截图插件(如果你会C++，可以查看我的这边文章《兼容各大浏览器的插件开发》了解如何开发浏览器插件；

启动图片上传的服务器(允许跨域)。

流程

点击截图，调用插件的方法来截图，完成后，插件会把图片上传到服务器中，并将上传后的地址返回给前端；

前端拿到地址后，将此地址当作canvas画布的背景(因为橡皮擦的功能设计，这个时候并不会将图片绘制到canvas上，而是当点击确定后，再把图片绘制到canvas上)，img 的crossOrigin 设为anonymous(如果没跨域就不需要)；

各种操作……. (注意，点击橡皮擦时，要将canvas.context.globalCompositeOperation设为destination-out)；

点击确定，绘制图片到canvas上，要将canvas.context.globalCompositeOperation设为destination-over；

然后通过canvas.toDataURL(“image/png”)即可取到涂鸦后的图片了。

涂鸦状态中的dom 结构如下所示:

可以看到在canvas的下面有一个img，这也就是为什么图片还没绘制到画布上也能看到图片的原因。不足之处，请多多指教。

图片涂鸦html插件,JS 网页截图、涂鸦相关推荐

html2canvas 插件实现网页截图（html保存为图片）
1.html2canvas 官网: http://html2canvas.hertzen.com/ html2canvas 是一款利用javascript进行屏幕截图的插件.可以使用两种语法格式进行截 ...
图片涂鸦html插件,HTML5 canvas 在线涂鸦
插件地址采用技术 jq-signature.min.js Developed using jQuery 2.1.4. Insert title here $(function(){ $('.js-s ...
利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
js网页3D雪花特效插件(导入直接使用，参数齐全)
//导入js类库 <script src="js/snow/threecanvas.js"></script> <script src="j ...
几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...
html2canvas 一个强大的使用js开发的浏览器网页截图工具
html2canvas是一个JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas通过获取页面的DOM和元素的样式信息,并 ...
使用js将手机wap网页截图
最近在开发中接到一个需求,在用户分享的时候需要把当前网页生成截图并将图片加网页链接一起分享. 首先想到的就是html5的画布功能,现在记录一下我的劳动成果. <!DOCTYPE html> ...
网页要展示大量图片时怎样延迟加载图片 lyz.delayLoading.min.js
当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载完毕再执行其它操作,而浏览器本身的http请求的最大并发数量(通常是2个,最多的也只是8个)又限制了全部图片完成下载的时间,这样网页的速 ...
html让gif图片暂停,控制gif图片播放暂停插件-jquery.gif.js
插件描述:jquery.gif.js是一款可以对Gif图片进行预览和播放的jQuery插件. 效果预览: Gif图片预览和播放jQuery插件-jquery.gif.js 简要教程 jquery.gi ...

图片涂鸦html插件,JS 网页截图、涂鸦

图片涂鸦html插件,JS 网页截图、涂鸦相关推荐

最新文章

热门文章