java后端接收前端的图片文件流生成图片放到excel当中 后端如何传图片给前端

admin2024-06-08  14

概述一下处理逻辑:

点击某个按钮,执行某个函数,该函数打开文件选择器->

将选择的文件转成base64字符串,并通过axios传给后端->

后端接收base64字符串,并将其转换成opencv格式的图片->

opencv格式的图片经过处理得到一个新的opencv格式图片,该图片转成base64字符串->

该base64字符串返回给前端,前端进行渲染

实操:

1. 前端安装必要的库

前端库:axios@1.6.7     qs@6.11.0

2. 页面元素

<img :src="store.img1" style="width:100%" alt="">
<img :src="store.img2" style="width:100%" alt="">

这是两个img标签,src中的img1表示处理前的图片(base64字符串),img2表示处理后的图片(base64字符串)

3. 浏览器选择图片并转化为base64字符串

这里以点击一个按钮为例(这个按钮用一个img标签代替,当然你也可以直接用一个div代替,给这个img或者div一个click事件即可)

<img @click="store.upload" src="./assets/up.png" alt="" height="49px">

点击img,触发upload函数,upload函数:

upload(){
  var input = document.createElement('input');input.type = 'file';
  input.addEventListener('change',e => {
      var file = e.target.files[0];//console.log(file.name,file.type,);
        let reader=new FileReader();
        reader.readAsDataURL(file)
        reader.onload=e=>{
          let base64string=e.target.result
          this.img1=base64string
          console.log(base64string);
          axios.post('http://127.0.0.1:8000/test1/upload',qs.stringify({name:base64string}))
            .then(response=>{console.log(response.data);this.img2=response.data.msg;})
      }
  })
  input.click();
},

解释一下这个函数的大概逻辑,先创建一个input标签类型为file(那么为什么不直接再页面中创建一个input标签嘞,问就是自带的input标签太丑了。。。,反正只是为了弹出一个文件选择框方便选择文件而已,就用这种方式好了)

接着为这个input标签添加change事件,该事件的回调函数中将选择的文件的第一个存储到变量file中,接着file通过reader.readAsDataURL(file)将file变量转成base64格式的字符串(也就是文件转字符串),转换完成后还有个回调函数onload,里面将这个base64字符串用base64string这个变量进行赋值,并且将base64字符串直接赋值给img1,好让之前的第一个img标签显示原始图片。然后通过axios将base64string传入后端。

这里需要注意一件事,传入给后端的base64数据:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkAAAEpAQAAAADn4ukvAAACCklEQVR4nO3aQW6jQBSE4b+ACO9gN0t8EzInyVEMNzM3sW8Ai5GMZKhZgOxJVpGcCZg0K9R8clcj6wleI/OJo44+oyCwwAILLLBPs07TsadPLOmVbjfMY7uFs22BpbbtI90O4FDvswuybbeLZ9sCGyRVAENsKJscQNJ+Bdk2xFKPAMV5942TbpglHwccmebtdBn+46Q/h823NzbQQC+grlD6Bwx0C2bbDOslSa+QXmX5WLRgSVK+eLanZvj9cQWg+DBarXkJT8CGCGpJSkdccZaS8O/9KtbtsGSfMvcRQGH3Ea5ujxCrX8JKWQKQXQaNquui7W8PZPEYaeFsW2GdEst2kxOPyMfpmqvylF0WzrYBNt/DZt9l/fTWJmn6gS4Uh8fZ9LJWTh0GS2ULwOG4gmzPzzopNrX2WZeOTM2H2IZmv3i2DbDMHiS7ydOrxcFNzhChqjwtnu25WQLQ5fHV0Lxm/U6G5q3N8T8PDqtewupZNr2slT7v4kFQnkgdisNXsftuBYAqzjlDBITi8CDDttt5t6JoU4/MJzaUpyz0HB5hc0NySODwm+wyvFhAzlR5i3bBbNtkrihaYptDvf+uSX8E65RY95JbH5qwU/wQe197fdsgnmtv6Pc+xqba28+VlvSaaPrqbHgZAbpfl8WybYBNDcn7d3zxdJpdGDG3bs+alxBYYIEF9nTsL3d0Co4PuPsxAAAAAElFTkSuQmCC

这里是一大段的,需要注意前面有data:image/png;base64,开头,这一大段可以直接赋值给img1,让img标签显示图片。并且需要注意的是“data:image/png;base64,”表示之前选择的图片格式是png,不能是其他格式,那么如果之前选择的是jpg格式的图片,这里应该显示为“data:image/jpg;base64,”

4. django接收base64格式图片

def upload(request):
    base64string=request.POST.get("name")
    print(base64string)
    img = base64.b64decode(base64string.split(',')[1])
    img_np = numpy.fromstring(img, dtype='uint8')
    new_img_np = cv2.imdecode(img_np, 1)
    barcodes=pyzbar.decode(new_img_np)
    print("检测到二维码个数:"+str(len(barcodes)))
    if len(barcodes):
        barcode = barcodes[0]
        (x, y, w, h) = barcode.rect
        cv2.rectangle(new_img_np, (x, y), (x + w, y + h), (0, 0, 225), 2)
        img_str = cv2.imencode('.png', new_img_np)[1].tostring()
        b64_code = base64.b64encode(img_str)
        print(b64_code)
        return JsonResponse({'state':0,"msg":"data:image/png;base64,"+str(b64_code).split("'")[1]})
        # cv2.imwrite("./test1/res_imgs/ddd2.png",new_img_np)
    return JsonResponse({'state':0,"msg":base64string})

解释一个这个函数,首先获取前端传给我们的base64字符串,并将数据赋值给变量base64string,由于此时这个变量里头是有data:image/png;base64前缀的,转格式之前需要通过base64string.split(',')[1]来去掉前缀,去掉之后再进行转格式,最终将转格式得到的opencv格式的图片用new_img_np来接收。然后就可以对这个new_img_np进行处理了。

由于作者这里是需要实现一个二维码检测,之后将检测图片里面的二维码进行框选,因此执行cv2.rectangle(new_img_np, (x, y), (x + w, y + h), (0, 0, 225), 2)将框框放在new_img_np上面(读者可以进行别的处理),之后对new_img_np进行转格式,得到b64_code这个base64格式的字符串,但是这个字符串如果直接打印是这个样子:

java后端接收前端的图片文件流生成图片放到excel当中 后端如何传图片给前端,java后端接收前端的图片文件流生成图片放到excel当中 后端如何传图片给前端_ios,第1张

......

java后端接收前端的图片文件流生成图片放到excel当中 后端如何传图片给前端,java后端接收前端的图片文件流生成图片放到excel当中 后端如何传图片给前端_4s_02,第2张

前面有b’,后面有个尾巴‘,这两个东东都是不需要的,因此去除,并且加上前缀data:image/png;base64,给返回给前端

5.前端接收base64字符串

这里实际上就涉及第三点的函数了,其中axios发送消息之后还有个回调函数:

java后端接收前端的图片文件流生成图片放到excel当中 后端如何传图片给前端,java后端接收前端的图片文件流生成图片放到excel当中 后端如何传图片给前端_前端_03,第3张

直接给img2赋值后端传回来的base64字符串,然后第二个img标签就也可以显示图片了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!