将数据：image/webp;base64转为图片

Question

我无法将使用 javascript 在 HTML 中捕获的图像转换为图像文件。

我正在使用 python 服务器 (python 3 +)。

下面是我的React JS代码抓图

var React = require ('react')
var Webcam = require('react-webcam')
var Test = React.createClass({
getInitialState:function(){
    return {};
},
capture:function(){
    var screenshot = this.refs.webcam.getScreenshot();
    this.setState({screenshot:screenshot});
    console.log("screenshot location is ",screenshot)

},
send_to_server:function(){
    RPC.execute("gold.setting","upload_webcam_blob",[this.state.screenshot],{},function(err,data) {
        if (err){
            alert(err);
            return
        }
    }.bind(this));
},
render:function(){
    console.log("apple",this.state)
    return <div>
        <Webcam ref='webcam'/>
        <button onClick={this.capture} >Capture</button>
        { this.state.screenshot ? <img src={this.state.screenshot} /> : null }
        <button onClick={this.send_to_server} >Send To Server</button>
    </div>;
},
});

module.exports= Test;

截图的值类似于下面的 data:image/webp;base64,UklGRuYmAABXRUJQVlA4INomAABwPgGdASqAAuA...... 我相信这是一个 base64 编码。

我将代码发送到 python 服务器，这样我就可以转换为图像并保存。

这是我的 python 代码

def upload_webcam_blob(self,blob,context={}):
    fh = open("imageToSave.png", "wb")
    fh.write(blob.decode('base64'))
    fh.close()

updae: 上面的代码确实创建了一个文件但是是空的。（这个代码不好X）

谁能告诉我我错过了什么？或任何正确的方法来转换图像并将其从上述格式存储。

Answer 1

更好的想法是在使用 react-webcam 时使用选项 screenshotFormat 指定屏幕截图格式（将其设置为 image/png）并使用此 Python 代码保存数据到 PNG 文件：

from base64 import b64decode

def upload_webcam_blob(self, blob, context={}):
    with open('imageToSave.png', 'wb') as fh:
        # Get only revelant data, deleting "data:image/png;base64,"
        data = blob.split(',', 1)[1]
        fh.write(b64decode(data))

将数据：image/webp;base64转为图片

convert data:image/webp;base64 to image

image

python-3.x

reactjs

base64

webcam