多情况下，我们都需要自己处理image相关的加载逻辑，及其相关的回调函数逻辑，在本文中我将介绍一下javascript中处理相关image标签，大家尝尝会遇到的一些情景，希望对于大家有帮助，当然，如果有大牛能够提供更好的解决方案和解答，本猿也不尽感谢，OKey，听我慢慢道来 ~~ ^o^

情景再现

大家在开发web应用过程中，往往会有些操作，例如，特定web动画是需要在某些文件体积比较大的背景图加载完毕之后才可以触发滴，所以通常情况下，我们这些程序猿都理所当然的把这些触发动作放到了img标签加载的相关load事件处理过程中，jQuery相关代码参考如下：

期望行为

图片加载完成后，触发该图片的load事件，然后触发callback回调函数中要执行的相关逻辑或者动画。

实际情况

实际场景中，这些比较大的图片相关的load事件并不是每次都需要被触发滴，存在偶然性

解决方案

以下是一个更新版本的代码书写：

$('#big-image').on('load', function{ // 在回掉函数中执行的一些逻辑 ...... }).each(function{ this.complete && $(this).trigger('load'); });

相比较前面书写的相关代码来说，我们做了一个小小的代码优化改动，绑定load使用了jQuery中的.one方法而放弃使用.on方法，之所以这么书写是因为希望load事件在整个代码逻辑中只被触发一次，而且避免了被重复执行。

注意： 如果使用的是 jQuery, 触发load事件时，我们可以使用.load来触发，如果你使用的第三方 javascript类库是zepto的话，那么就只能乖乖使用.trigger('load')方法啦~

代码分析

这里本猿从专业角度和职业角度详细分析下image的load事件和complete属性 ^O^

首先看看MDN的一些load事件文字描述：

The load event is fired when a resource and its dependent resources have finished loading.

简单翻译过来就是：

load事件是在一个资源并且该资源的依赖资源都完成加载中之后才被触发

这里大家关注一下关键字 finished loading，也就是说用户代理端（例如，浏览器/webView）第一次从服务器上请求资源完成，这算finished loading, 当再次刷新这个页面，如果浏览器使用了上次请求的资源（缓存到本地的资源），那就不算做loading, 自然也就不会触发资源的load事件。当然本猿对于浏览器中本地缓存的应用策略没有深入了解过，这里就暂且不表，待本猿深入研究后再与各位大牛分享一二， 嘿嘿

complete属性

MDN对image元素的complete属性做了如下的描述：

HTMLImageElement.complete Read only

Returns a Boolean that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no src value.

简单翻译如下：

HTMLImageElement.complete 只读属性
返回一个boolean值，如果是true的话，说明浏览器完成了图片获取，无论成功与否。即使这个img元素没有src属性值的话，该complete属性值仍旧显示为true.

这个定义的关键点在于finished fetching，换个说法，这个属性只是用来表明浏览器是否履行了他的职责（fetch）, 与图片是否能正常显示并没有半毛关系（图片显示与否是开发者自己的责任），所以同一个页面进行第二次刷新的时候，如果浏览器还记得他已经fetch过这个图片了（其中一种表现即是浏览器缓存了图片），那么这个属性值就是true, 否则就是false.

它跟图片的load事件没有直接关系，但是还是有一些间接关系，如果complete值为true话（这种情况一般是非首次加载页面）, 那就表明浏览器去抓取过图片了，那图片就有可能被缓存，这时load事件就不会触发，这种情况就需要像如上解决方案中的那样手动触发load来辅助实现

版权说明： 本文配图/文字版权属于igeekbar.com及作者联合所有，如需转载请务必注明iG客吧原文来源，感谢阅读支持~

意： 这篇文章的处理滑块验证码跟平时的不一样，并不是简单的一张背景图，一张滑块图计算滑块的缺口位置。最近由中国音像与数字出版协会举办的2020中国游戏十强投票开始，老大问我能不能搞个自动无限投票，我打开网址操作了一番，感觉简直不要太简单，直接说这个自动化爬虫还不是几分钟的事情，完全没什么技术难点呀，分分钟给他莫的网站投爆。尴尬的是写到自动化识别滑块验证码的时候。却发现该滑块验证码是由canvas绘制而成，而不是以往的两张图片进行识别。虽然说有点小阻碍。但是想法总比困难多，在我天马行空的想法下，几分钟也就搞定了这个难点。

目录

一、分析网站

二、canvas滑块验证码

三、验证流程

私信小编01即可获取大量Python学习资料

一、分析网站

• 2020十强游戏投票网址: http://2020top10.cgigc.com.cn
• 首先发现该网站需要填写姓名、手机号、邮箱，这...我一头黑线，网络上还有这操作去确定一个人的身份真实还是不真实? 中国音像与数字出版协会你可长点心吧，你们技术是烂大街了吧，我都不好意思点破，好歹搞个微信授权登陆呀，这样就算刷票也只能去买量
• 我们继续分析网站，不去纠结人家的技术怎么样，这里姓名、手机号、邮箱我们都可以自动生成，最关键的就是在下一步点击开始投票的时候，需要验证滑块验证码

二、canvas滑块验证码

①、背景canvas

• 我是为了直接展示验证码这个环节，所以姓名是瞎写的，我们自动生成姓名的时候为了真实，一定要以百家姓为基础去随机生成
• 如果想看如何生成随机姓名、手机号、邮箱请参考: python生成随机姓名、手机号、邮箱
• 首先我们看下背景canvas，可以看到dom元素是canvas，这里就尴尬了，跟一般的图片滑块验证码不一样，我们如果处理canvas滑块呢，其实想通了处理起来会比平时的图片滑块验证码简单了好几倍不止
• 思路肯定是要将canvas的图片给爬下来，但是很多初学者到这里就尴尬了，他不知道怎么去下载canvas图片，这个后面会提到，暂时先不赘述

②、滑块canvas

• 看dom选中的蓝色区域，其实就是滑块canvas，这里可以跟平时仅仅是一张图片的滑块有很大不同，可以看出滑块canvas其实是一张png透明图片，而这张图片的大小刚好与背景的大小一摸一样，这张图片上绘制了滑块的正确位置，我们移动滑块的时候，其实是移动的整张透明的png图片，当这个图片与背景重合的时候，透明图片上的滑块刚好对应了背景中的滑块的区域，也就是识别成功
• 知道了这点，我们就知道为什么会比普通的滑块验证码处理起来更加的简单，因为普通滑块需要识别滑块和背景图的缺口，但是这个canvas滑块呢，其实只需要识别透明的滑块canvas上的滑块左端距离透明图片的左端像素是多少，就是需要移动多少距离，这么说可能有点绕，我下面画个图理解一下
• 而且因为他是透明的png图片，经过颜色反转之后，只有滑块的地方有像素，这就更好识别了，直接找到有像素的最小距离即可

三、验证流程

①、下载滑块canvas

def download_yzm(self):
   js = '''
        return document.getElementById('puzzle-lost').toDataURL()
    '''
    base64str = self.driver.execute_script(js)
    resultstr = base64str.strip("data:image/png;base64")
    resultstr = resultstr[1:]
    imagedata = base64.b64decode(resultstr)
    file = open('./bg.png', "wb")
    file.write(imagedata)
    file.close()

• 经过上面分析，其实我们不需要管背景，只要处理滑块canvas即可，首先需要将其下载下来
• 而学过javascript的小伙伴都知道canvas有个方法toDataURL可以将canvas转化为base64编码的格式，我们所需要做的就是将base64的编码格式保存成最终的png图片，以供后期识别

②、识别滑块canvas中有像素位置

def handler_yzm(self, image):
    im = Image.open(image)
    im = im.convert('L')
    w, h = im.size
    result = 0
    for x in range(w):
        if result != 0:
            break
        for y in range(h):
            if im.getpixel((x, y)) > 0:
                result = x
                break
    return result - 10

• 使用Image模块处理图片后，找有像素的最小x轴位置，因为是找x轴，所以从0的位置到图片最大宽度的位置进行循环，找y轴有像素的最小位置
• 找到之后，即是滑块左端距离图片左端的位置，也就是最终需要滑动的位置，最后结果为啥要减去10个像素呢，是因为分析实际情况，距离差10个像素，看下面红框的位置

③、最后

• 大家应该都会接下来的自动化操作流程了，希望大家看完后觉得有帮助的，给博主点个关注

者：linong

转发链接：https://segmentfault.com/a/1190000022597533