Myu: クリップボード画像をアップロード（bottle)

2019年10月22日火曜日

クリップボード画像をアップロード（bottle)

クリップボードの画像をすぐアップロードできれば便利かと思い、javascriptとbottleの組み合わせで実装してみた。
https://qiita.com/volpe28v/items/dc100c75c2371bb82a3b
https://qiita.com/tatesuke/items/00de1c6be89bad2a6a72
の２つのサイトを参考にさせていただきました。

bottleでのformdataの取得方法に関する情報が少なく、試行錯誤が必要でした。
結局、formからの送信内容を調べてわかったことが、
ajaxにわたすformDataの"data"を、bottoleの中のdataと同じ文字に揃えるといいということでした。
formData.append("data" ,imageFile,"test.png");と
data = request.files.dataの部分です。

<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div id='up' contenteditable="true" width="50px" height="50px">
paste image here
</div>
<img id="outputImage" border="1" width="50%">

<script>
var element =  document.querySelector("[contenteditable]");
element.addEventListener("paste", function(e){
    if (!e.clipboardData 
            || !e.clipboardData.types
            || (e.clipboardData.types.length != 1)
            || (e.clipboardData.types[0] != "Files")) {
            return true;
    }
    var imageFile = e.clipboardData.items[0].getAsFile();
    var fr = new FileReader();
    fr.onload = function(e) {
        var base64 = e.target.result;
        document.querySelector("#outputImage").src = base64;

        var formData = new FormData();
        formData.append("data" ,imageFile,"test.png");
        upload_file_with_ajax(formData);
    };
    fr.readAsDataURL(imageFile);
    this.innerHTML = "paste image here";
    
   

});


function upload_file_with_ajax(formData){
    $.ajax('/upload' , {
      type: 'POST',
      contentType: false,
      processData: false,
      
    　data: formData,
      error: function() {
        alert('error');},
      success: function(res) {
        alert('success!:'+res);}
    });
  }
  

</script>

@route('/upload', method='POST')
def do_upload():
    data = request.files.data
    if  data and data.file:
   # if data.file :
        raw = data.file.read() # This is dangerous for big files
        #raw='test'
        #filename = data.filename
        filename=data.filename
        with open(filename,'w') as open_file:
            open_file.write(raw)
        return "You uploaded %s (%d bytes)." % ( filename, len(raw))
    return "You missed a field."

追記：bottleのほうですが、herokuでは動作しているのですが、raspiでは、なぜか画像uploadでエラーがでるようでした。
with open(filename,'w') as open_file: の部分を
with open(filename,'wb') as open_file:　とするといいようでした。
バイナリで保存することを明示したほうがいいようです。

Myu

2019年10月22日火曜日

クリップボード画像をアップロード（bottle)

0 件のコメント:

コメントを投稿

ブログアーカイブ