怎么在前端用ajax传canvas中的图片,后端用flask接受
时间: 2024-05-12 12:18:05 浏览: 97
可以在前端使用 Canvas 的 toDataURL() 方法将 Canvas 渲染后的图片转换成 base64 编码的字符串,然后使用 AJAX 将字符串传递给 Flask 后端。在 Flask 后端使用 base64 模块将字符串解码成图片数据即可。具体实现可以参考以下代码:
前端代码:
```javascript
var canvas = document.getElementById('myCanvas');
var imgData = canvas.toDataURL();
$.ajax({
url: '/upload_image',
type: 'POST',
data: {'imgData': imgData},
success: function(response) {
console.log('上传成功', response);
},
error: function(error) {
console.log('上传失败', error);
}
});
```
后端代码:
```python
from flask import Flask, request, jsonify
import base64
app = Flask(__name__)
@app.route('/upload_image', methods=['POST'])
def upload_image():
img_data = request.form['imgData']
img_data = img_data.replace('data:image/png;base64,', '') # 去掉 base64 头部
img_data = base64.b64decode(img_data) # 解码 base64 字符串
with open('image.png', 'wb') as f: # 将图片保存到本地
f.write(img_data)
return jsonify({'msg': '上传成功'})
if __name__ == '__main__':
app.run()
```
阅读全文