javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js获取图片base64

js获取图片base64的正确实现方式

作者:wtcl_wtcl

这篇文章主要给大家介绍了关于js获取图片base64的正确实现方式,BLOB是二进制大对象,是一个可以存储二进制文件的容器, 在计算机中BLOB常常是数据库中用来存储二进制文件的字段类型,需要的朋友可以参考下

前言

最近遇到了一个需求,要求在python的selenium自动化打开的浏览器中,执行js代码,实现获取图片的base64,并返回给python变量。

看似很简单的一个需求,实际上包含了很多js相关的知识点和开发上的技术点。

今天这篇文章,主要写写整个过程中有用的知识点。

原始方法

其实最开始我没有考虑用js获取图片,所以用pyautogui键盘操作下载图片,代码如下:

import pyautogui
from selenium.webdriver import ActionChains

driver.get(url)
ActionChains(driver).move_to_element(driver.find_element_by_tag_name('img')).context_click().perform()
pyautogui.typewrite(['v'])
time.sleep(1)
pyautogui.typewrite(['enter'])

这里面,主要运用电脑上的快捷键,在选择图片后,右键,然后按v键,就会弹出保存窗口,再按enter,就可以按照默认信息保存。

这种方式是模拟手动,原理简单,但是,在多次重复这个操作时,会发现偶尔会出现一个bug,就是按v键会与保存冲突,使得电脑以为将图片名命名为v,然后整个过程就无法继续进行了。

为了解决上述问题,我才采用js的方法,才有了后面的内容。

第一版js代码

var source = document.getElementsByTagName('img')[0];
// 在网页元素中找到图片资源
var img=new Image();
// 创建一个image元素
img.src=source.src;
// 设置img的图片链接为网页图片链接
img.crossOrigin='anonymous';
// 设置跨域的配置,这个是比较常见的,如果不了解,读者可以自行百度
var xhr=new XMLHttpRequest();
// 初始化一个http请求
xhr.open('GET',source.src,false);
// 构造请求
xhr.send(null);
// 发送请求
xhr.open('GET',source.src,false); // 重复上面步骤,为了确定加载到资源
xhr.send(null);
var canvas = document.createElement('canvas');  
// 创建canvas元素
var ctx=canvas.getContext('2d');
// 获取canvas二维属性
ctx.drawImage(img,0,0);
// 将img画到canvas上
var dataURL = canvas.toDataURL('image/png');
// 利用canvas转换图片为base64形式
return dataURL;

上面的代码运行后,发现获取到的base64还原出的图片是黑色的,运行很多次都这样。所以我又在浏览器console下一条一条执行,结果发现能够给出正常的base64,但是在浏览器直接解析后,发现图片虽然能够正常显示,但是图片的大小是被裁剪的。

仔细思考后,我感觉可能是因为获取的图片的问题,但是看了network的加载记录,发现好像并不是这样,加载的图片都是完整的。所以,可能是canvas画图的时候出了一些问题,所以就去了解canvas的drawImage函数。

研究一番,发现,这个函数第一个参数是图片信息,第二和三个参数是画布的坐标,表示从哪个位置开始画,然后还可以有第四和五个参数,表示要画出的图的宽和高,所以我就修改了那句为

ctx.drawImage(img,0,0,source.naturalWidth,source.naturalHeight);
// 这里面的source是指网页的图片,然后naturalWidth是原宽,naturalHeight是原高

这里就把整个图画上去,但是经过实验后,我发现画出来的图还是裁剪后的图,而且,每次的图的大小都是一样,这就使我明白,会不会是画布的大小出了问题。

经过查阅资料,我发现canvas是有初始大小的,而且如果不改的话,是不会变的。所以,我又在画图前设置canvas的画布大小。

canvas.width=source.naturalWidth;
canvas.height=source.naturalHeight;

经过这次,我在浏览器端一条一条执行时,发现代码执行没问题,最后结果都正确。我以为第一天的工作结束了,解决了这个问题,明天简单弄弄就好了,但是一个更麻烦的问题在路上了。

注意:上面的在console下一条一条执行代码和在python中执行js代码的结果是不一样的。因为一条一条执行,中间是有时间消耗的,不好异步任务可以在此期间完成。

第二版js代码

var source = document.getElementsByTagName('img')[0];
// 在网页元素中找到图片资源
var img=new Image();
// 创建一个image元素
img.src=source.src;
// 设置img的图片链接为网页图片链接
img.crossOrigin='anonymous';
// 设置跨域的配置,这个是比较常见的,如果不了解,读者可以自行百度
var xhr=new XMLHttpRequest();
// 初始化一个http请求
xhr.open('GET',source.src,false);
// 构造请求
xhr.send(null);
// 发送请求
xhr.open('GET',source.src,false); // 重复上面步骤,为了确定加载到资源
xhr.send(null);
var canvas = document.createElement('canvas');  
// 创建canvas元素
canvas.width=source.naturalWidth;
// 设置画布宽
canvas.height=source.naturalHeight;
// 设置画布高
var ctx=canvas.getContext('2d');
// 获取canvas二维属性
ctx.drawImage(img,0,0,source.naturalWidth,source.naturalHeight);
// 将img画到canvas上
var dataURL = canvas.toDataURL('image/png');
// 利用canvas转换图片为base64形式
return dataURL;

上面代码是前面修改后、我以为正确的代码,但是,第二天放到python中运行后,发现结果还是不对,图片仍然是黑色的,不正确。

我说,难道是我保存的昨天的代码不对吗?所以还是重复错误的步骤,在浏览器下一条一条的运行。结果是正确的,所以我就很纳闷,一样的代码怎么会有不同的结果?

我不理解,但是我感觉可以试试将代码包装从函数的形式,在浏览器端运行。观察一下结果,发现结果给出的内容确实不是图片正常的base64,只能转为黑色的图片。

为了验证我的结果,我还运行了多次,结果都一样。我还将浏览器的正常结果、错误结果和python端的结果进行对比,我发现正确结果是很长的,而两个错误结果一样长度,都很短。

故事到这,陷入了僵局,我不知道该怎么办了。

正好到晚饭点了,所以就先去吃饭吧,吃饭的过程中,看看canvas的文档,了解一下具体的使用方法,说不定会有一些意外的收获。

在晚饭期间,我看到canvas画图的一些注意事项:若调用 drawImage 时,图片没装载完,那什么都不会发生(在一些旧的浏览器中可能会抛出异常)。因此你应该用 load 事件来保证不会在加载完毕之前使用这个图片。(来源于https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images)

官方文档给出了案例:

var img = new Image();   // 创建 img 元素
img.src = 'myImage.png'; // 设置图片源地址
img.onload = function(){
  // 执行 drawImage 语句
}

我没有直接将这个作为解决方案,我又多看了一些论坛,发现大部分都是这样实现的。

后面,将这个代码加到我的代码中,我发现return语句在外面的话,还是会返回错值;return语句里面的话,是可以正常执行的,但是返回的值是无法返回到外层的。

于是,我灵机一动,直接return img.onload…

在浏览器下确实成功了,但是,在python这边,却还不对,返回的是一个函数对象。

到此,我明白,要等图片装载完成后,再执行drawimage语句,然后再返回才行。但是,js代码不会等,只要执行了就会继续往下执行下一条,不管你是否执行完成。

第三版js代码

为了解决加载完成的问题,我在想是不是有可以休眠等待的函数,查阅之后,发现可以自己构造一个sleep函数。

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
sleep(1000); // 休眠1s

但是,加在上面代码后面,返回结果还是那样,感觉无法停止代码执行。

经过查阅资料,发现还有一个setTimeout函数,可以设置一段时间后再执行函数,但是输入值只能是函数,这就要求在函数里面返回最后的base64。但是,实际实验了一下,发现这个方式行不通,不返回内容。

然后,继续查阅资料,发现可以通过throw error抛出内容,我当然也尝试了,发现都是uncaught。我当时就纳闷,然后把setTimeout函数也换成了img.onload,但是结果都不对。

中间经过大量的实验,省略n次尝试。。。

最后,我明白了只有在try里面直接执行throw error代码,才能够catch到。至于利用try包裹etTimeout和img.load等耗时异步语句,都不能正常catch,因为正常执行到throw error时,已经结束了外面了try{}catch{}语句的执行,所以根本catch不到。

上面的一大堆过程,让我明白了,根本原因是在异步代码的执行完成前能否不继续执行下面的代码。

最终的js代码

var source = document.getElementsByTagName('img')[0];
var img=new Image();
img.src=source.src;
img.crossOrigin='anonymous';
var canvas = document.createElement('canvas');
canvas.width=source.naturalWidth;
canvas.height=source.naturalHeight;
var ctx=canvas.getContext('2d');
function httpPromise(){
   return new Promise((resolve,reject) => {
       if(img.complete || img.naturalHeight!==0)
       {
         ctx.drawImage(img,0,0,source.naturalWidth,source.naturalHeight);
         var dataURL = canvas.toDataURL('image/png');
         resolve(dataURL);
        }
        else{
         img.onload=function(){ 
                ctx.drawImage(img,0,0,source.naturalWidth,source.naturalHeight);
                var dataURL = canvas.toDataURL('image/png');
                resolve(dataURL);
               }
         }
    })
}
return httpPromise().then((dataURL)=>{return dataURL;}

最后这版代码做了一些改动,首先我删除了xhr加载的代码,因为这个加载过程和最后的结果没有关系,不影响最后的结果;然后,我添加了Promise异步处理机制,运用这个,就可以等待异步执行结束后,收集所有的结果,并且返回(我记得java也有类似的库可以解决异步等待的问题);最后,我添加了判断机制,防止img.onload因为缓存的原因不响应,所以分成了两种情况进行处理,但都是将结果收集,在return语句处返回。

插一嘴:这里需要return语句,是因为python里面的driver.excute_script函数是将我们的js代码包装成函数,需要返回内容进行处理,否则返回值就直接为None。

上面就是我通过自己摸索,实现的这样一个需求,虽然经过了很多磕磕绊绊,但是结果还是好的。其实,有一篇博客的代码我觉得是优于我的代码。

大佬的代码

// https://blog.csdn.net/yaxuan88521/article/details/122794055
let c = document.createElement('canvas');
let ctx = c.getContext('2d');
let img = document.getElementsByTagName('img')[0];
c.height=img.naturalHeight;
c.width=img.naturalWidth;
ctx.drawImage(img, 0, 0,img.naturalWidth, img.naturalHeight);
let base64String = c.toDataURL();
return base64String;

上面大佬的代码,是直接获取加载后的图片元素,效果是优于我的代码,毕竟减少了一次加载的时间消耗。

总结

本文通过笔者在js获取图片base64的过程中,遇到的问题。
总的说来,可以分为以下几点:

最后,本文主要介绍了js获取图片base64的问题,中间过程有些曲折,内容可能有点凌乱,但是技术点还是给出了,希望各位读者能够从中有所收获。

附:js实现base64格式编码图片(通俗,易懂)

vip会员内容
您可能感兴趣的文章:
阅读全文