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文件：< / p>

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]
        fh.write(b64decode(data))

转换数据：image / webp; base64到image

1 个答案: