-婺源中学科技实践活动

站内公告

JS保存验证码图片

发表时间：2023-5-13 浏览次数：15

JS实际上是不能写文件的，但是可以通过HTML5中<a download="1.jpg" href="图片地址"'></a>，在点击a标签时下载到本地。此种方法仅对具体图片有效。

如果验证码图片是动态生成的，再使用<a download="1.jpg" href="动态生成图片的img中src"></a>，相当于刷新了验证码，下载后不再是原先的验证码图片！！！
VFB中的Miniblink免费控件，不支持声音、视频播放和不支持HTML5中的A<a>的download属性

1、将验证码图片（就是一个DOM对象），画在<canvas id="canvans"></canvas>中（画布），代码如下：

//在<canvas></canvas>中画出验证码——【特别说明】验证码图片不可见也可以画与屏幕截屏不是一个概念

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var img = document.getElementById('validateCodeImg');

ctx.drawImage(img,0,0);

2、将画布上的验证码图片转为img数据，并显示在img标签中<a id='captchaDownload' download='1.jpg' href=''><img id='captchaDownload' src='' /></a>

var canvas = document.getElementById('canvas');

var image = new Image();

image.src = canvas.toDataURL("image/png");

var s="<img src='"+image.src+"'>";

document.getElementById('captchaDownload').href=image.src;

document.getElementById('captchaDownload').innerHTML=s;

3、自动下载——自动点击a标签

document.getElementById('captchaDownload').click();