конвертировать данные: image/webp; base64 to image

Question

Я не могу преобразовать изображение, записанное в HTML, используя javascript в файл изображения.

Я использую сервер python (python 3 +).

Ниже мой Реагировать 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; 

Значение скриншоте является чем-то вроде folliwing data:image/webp;base64,UklGRuYmAABXRUJQVlA4INomAABwPgGdASqAAuA...... Я считаю, что это base64 кодирование.

Я отправляю код на сервер python, поэтому я могу преобразовать его в изображение и сохранить его.

Вот мой питон код

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

updae: Приведенный выше код действительно создает файл, но пустой. (этот код плохой X)

Может ли кто-нибудь предложить, что мне не хватает? или любой правильный способ конвертировать изображение и сохранять его из вышеуказанного формата.

Answer 1

Лучшая идея была бы определить формат скриншот с помощью опции 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] 
     fh.write(b64decode(data))