当前位置：首页 > news >正文

vue中将html2canvas转成的图片传递给后台 Python Flask 服务

news 来源：原创 2025/4/29 6:09:41

下面将详细介绍如何在 Vue 项目里把 html2canvas 转换得到的图片传递给后台的 Python Flask 服务。

前端（Vue）步骤

1. 安装依赖

首先要确保已经安装了 html2canvas 和 axios，若未安装，可在终端执行以下命令：

npm install html2canvas axios

2. 编写 Vue 组件代码

<template><div><div ref="captureElement"><!-- 这里放置要捕获为图片的 HTML 内容 --><h1>示例内容</h1></div><button @click="captureAndSend">捕获并发送图片</button></div>
</template><script>
import html2canvas from 'html2canvas';
import axios from 'axios';export default {data() {return {captureElement: null};},mounted() {this.captureElement = this.$refs.captureElement;},methods: {async captureAndSend() {try {// 使用 html2canvas 捕获元素并转换为 canvasconst canvas = await html2canvas(this.captureElement);// 将 canvas 转换为 Base64 编码的图片数据const dataURL = canvas.toDataURL('image/png');// 去掉 Base64 数据的前缀const base64Data = dataURL.split(',')[1];// 发送 POST 请求到 Flask 服务const response = await axios.post('http://localhost:5000/upload_image', {image: base64Data});console.log(response.data);} catch (error) {console.error('捕获或发送图片时出错:', error);}}}
};
</script>

代码解释

获取要捕获的元素：在 mounted 钩子中获取需要转换为图片的 HTML 元素。
捕获并转换为图片：使用 html2canvas 把元素转换为 canvas，再将 canvas 转换为 Base64 编码的字符串。
去掉前缀：使用 split(',')[1] 去掉 Base64 数据的前缀。
发送请求：使用 axios 发送 POST 请求到 Flask 服务，请求体中包含 Base64 编码的图片数据。

后端（Python Flask）步骤

1. 安装依赖

确保已经安装了 Flask 和 Pillow（用于处理图片），若未安装，可使用以下命令安装：

pip install flask pillow

2. 编写 Flask 服务代码

from flask import Flask, request
import base64
from PIL import Image
import ioapp = Flask(__name__)@app.route('/upload_image', methods=['POST'])
def upload_image():try:# 获取请求中的 Base64 编码图片数据data = request.get_json()base64_data = data.get('image')if not base64_data:return {'message': '未提供图片数据'}, 400# 解码 Base64 数据image_bytes = base64.b64decode(base64_data)# 将字节数据转换为图片对象image = Image.open(io.BytesIO(image_bytes))# 保存图片到本地image.save('uploaded_image.png')return {'message': '图片上传成功'}except Exception as e:return {'message': f'图片上传失败: {str(e)}'}, 500if __name__ == '__main__':app.run(debug=True)