利用html2covans 截图，绘圈

最新推荐文章于 2022-09-26 13:00:25 发布
原创 最新推荐文章于 2022-09-26 13:00:25 发布 · 450 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#canvas #javascript

该博客详细介绍了如何通过html2canvas库实现网页元素的截图，并结合canvas在图片上绘制圆圈进行图形标注，最后再次转换为图片。整个过程需要在服务器环境中运行，例如使用live-server。代码实现包括四个主要步骤：截图、图形标注、重新截图和展示结果。

功能展示如图所示在这里插入图片描述
代码实现原理：
1.利用html2-cavans 对当前元素截图生成base64的图片格式
2.利用cavans在img图片绘制圆圈并定位图形位置
3.将绘制后的img图片再次利用html2-cavans生成新的img图片
4.代码必须运行的服务器上，可利用node服务输入： live-server 即可运行
具体代码见：
GITHUB

Vue中插入HTML代码的方法
12-03
一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` My name is Pjee <p v-html='text'></p> 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS ...
html2canvans实现浏览器快速截图(这里有demo哦)
主要领域：前端开发
07-04 4652
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html2canvas</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"><...
html画圆圈原理,【已解决】HTML中用Canvas画圆圈
weixin_35899665的博客
05-30 503
折腾：【未解决】vuejs的vue-admin-template中自己手动实现画出类似电路图的控制面板图期间，再去canvas中圆圈如图：希望画出大大小小的各种圆圈包括圆圈里面还带东西的。ctx.lineWidth = 1ctx.beginPath()ctx.arc(LeftLineXHalf, TopLineY + 20, 5, -Math.PI, Math.PI, false)ctx.stro...
html2
weixin_72979500的博客
09-26 366
html的小应用
cavans画布
小菜鸟的博客
03-12 860
cavans画布 var canvas=document.getElementById('')//获取元素 var ctx =canvas.getContent("2d")//定义画笔有了绘画功能 注意：填充颜色必须在填充矩形之前 1.ctx.globalAlpha=0.2 设置透明度 2.ctx.strokeStyle='rgba(225,0,0,0,0.5) 边框的颜色 3.ctx.fillStyle=rgba(255,0,0,0.5)填充样式 4.lineWidth=2线条宽度 5.lineC
html2canvas的0.5.0-beta4版本(可以解决图片不清晰问题)
Cool的博客
11-07 1万+
/* html2canvas 0.5.0-beta3 &lt;http://html2canvas.hertzen.com&gt; Copyright (c) 2016 Niklas von Hertzen Released under License */ !function(e){if("object"==typeof exports&amp;&amp;"undefined...
html2canvas踩坑记
热门推荐
我的技术博客
01-09 4万+
前端程序员墓志铭:永远不要使用Alpha版的插件 最近写一个活动项目需要将一个HTML页面转为图片,之前一直是后台采用拼接的方式完成,然而现在遇到一个问题,Java拼接的HTML在生成图片时由于里面的文字太长没法自动换行,想使用css的强制换行 #wrap{word-break:break-all; width:200px;} 或者 #wrap{word-wrap:break-word;
HTMLCanvans 使用指南
yuange
08-22 1090
1 普通截取屏幕，没有滚动条 一般直接按照教程使用就可以，不会出问题 2 有滚动条长截图 1） //页面滚动到顶部 document.body.scrollIntoView() setTimeout(function() { const targetDom = document.getElementById("scrollW"); //copy dom 到body .
Krona绘制物种或功能组成圈图
刘永鑫的博客——宏基因组公众号
06-10 1万+
Krona简介 Excel插件安装和使用 实例欣赏 Linux下安装和使用 Reference 猜你喜欢 写在后面 之前介绍SILVAngs:16S/18S在线分析流程中，就整合有KRONA圈图的结果，非常漂亮。今天为大家带来KRONA的详细介绍和使用实战教程。 Krona简介 Krona采用多图层饼图，交互式探索层级数据。软件同时支持Linux命令行脚本和图片界...
前端对图片加载失败做默认图片处理
Amy_cloud的博客
03-07 5810
类似于下面图片展示这样： 1.JQ的写法： 获取该图片的class，采用jq的one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。 $('.top_mg').one(&amp;amp;amp;quot;error&amp;amp;amp;quot;, function(e){ //加入相应的图片类名 $(this).attr(&amp;amp;amp;quot;src&amp;amp;amp;quot;, &a
记录一段js:判断数组元素连续或者不连续
Amy_cloud的博客
01-11 5730
如果我们拿到一个数组的解构是这样的： [‘2’,‘3’,‘5.5’,‘6’,‘7’,‘8’,‘12’,‘12.1’,‘13’,‘16’,‘17’] 我们需要把它变成这样： 2-3，5.6，6-8，12，12.1，13，16-17 思路： 1，先将数组连续的数字push进一个新的数组 2，再通过 map 遍历这个数组 function sort(arr) { var result = [];...
js对数组做处理(数组去重 + 数组对象去重)
Amy_cloud的博客
11-21 3451
1 . 利用双层循环，对数组去重 function unique(arr) { var ret = []; var len = arr.length; for (var i = 0; i &amp;lt; len; i++) { for (var j = i + 1; j &amp;lt; len; j++) { if (arr[i] === a...
正则验证数字、小数和字符
Amy_cloud的博客
09-21 2042
changeNum:function(s){ if (s.score_rate == null || s.score_rate == '') { return; } var reg = /\d{0,3}\.\d{1}/;//验证小数 var regint = /\d{0,1}/; //验证数字 var regzero = /^0*$/; //验证字符 ...
如何判断PC端用户缩放浏览器页面
Amy_cloud的博客
06-22 2009
通过向window对象添加事件句柄， 根据ctrlKey 事件属性，返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住， 采用 window.devicePixelRatio 判断设备的像素比； 采用 window.onresize 来监听屏幕得变化。 （BUT，mac得像素比又待深究…….） 在不考虑兼容性得情况下代码入下： window.addEventListene...
一个数组多个对象，根据对象相同属性重新组件新数组
Amy_cloud的博客
04-20 1662
json结构如下： var stu_list = [ {name:'lili',uid:123,exam_id:234,score:12}, {name:'lili2',uid:321,exam_id:234,score:12}, {name:'lili',uid:123,exam_id:231,score:120}, {name:'lili2',uid:321,...
JS递归算法
Amy_cloud的博客
06-25 1244
浅谈递归就是在函数内部去调用其自身。 function a(n){ if(n&lt;= 2){ return 2 }else{ return n*arguments.callee(n-1); //4*3*2*1 } } a(4) // 24 举个例子： 斐波那契数列：(兔子生兔子题目)–从出生后第3个月...
根据后台返回的字符来绘制验证码图形
Amy_cloud的博客
03-06 1219
开始之前还是看一下我们想要的效果 1，首先像图片当中这样的验证码图形，我们采用的canvas来绘制的 2，用户的输入是自主无控制的，所以我们在提交表单之前需要对用的验证码输入进行大小写的转换 //这里的code就是用户的输入 if( /[a-z]/.test(model_code) ){ code = code.tolocaleLowerCase(); ...
如何实现图片懒加载
Amy_cloud的博客
12-04 1191
原文来自微信公众号：web前端学习圈 什么是懒加载？ 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。 懒加载原理 img标签有一个属性是 src，用来表示图像的URL，当这个属性的值不为空时，浏览器就会根据这个值发送请求。如果没有 src属性，就不会发送请求。...
聊一聊js闭包以及常见的运用场景
Amy_cloud的博客
04-12 1134
1.首先我们有个需求是，有一段ul，循环给里面的li绑定事件； 页面布局这样子的，现在我们需要用到闭包来实现这样一个需求： 方法一：绑定事件放在立即执行函数中 function callback(text){ document.getElementById(text.id).innerHTML = 'hello world' } function setListMsg(text){ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值