如何将画布转换成图像上传到烧瓶？ [英] how to convert canvas to image to upload to flask?

问题描述

好吧，我正在尝试将一个调整大小的画布图像作为一个文件上传到Flask。

首先，我尝试使用 canvas.toDataURL（）将其转换为base64（？）字符串，然后试图用 formdata 与AJAX上传图像，没有运气。

然后我试着将base64使用这个函数的一个blob：

$ p $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ，b，i;
g = stuff.split（'，'）;
if（g [0] .split（'png'）[1]）$ ​​b $ b type ='png';
else if（g [0] .split（'jpeg'）[1]）$ ​​b $ b type ='jpeg';
else
返回false;
bi = atob（g [1]）;
ab = new ArrayBuffer（bi.length）;
ua = new Uint8Array（ab）;
for（i = 0; i ua [i] = bi.charCodeAt（i）;

b = new Blob（[ua]，{
type：image /+ type
}）;
return b;

$ / code $ / pre

不是图片

这里是我使用的ajax表单：

  s = new FormData（）; 
 s.append（'image'，toblob（d））; \\我相信我用request.files ['image']来指代这个。 
 var g = $ .ajax（{
 url：'url'，
 type：'POST'，
 processData：false，
 contentType：false，
 data：s 
））// POSTDATA 
  

：

  @ app.route（'/ requests /< req>'，methods = ['POST']）
 def request（req = None）：
 if req =='upload'and request.method =='POST'and request.files ['file']：
 file = request.files [ 'image'] \\参考formdata（）key 
 if file和allowed_file（file.filename）：
n = secure_filename（file.filename）
 file.save（os.path .join（app.config ['UPLOAD_FOLDER']，n））
 return redirect（url_for（'index'，p = n））
  

所有这些都很重要

发送数据的好工作，因为很多其他的计算器问题我们e相同的方法为PHP服务器和服务器确实收到的数据。

我的问题是，我不知道如何将这些数据转换成物理文件存储到一个目录？

• 我试过使用上传教程，但数据不是一个文件，所以
  不起作用。


• 我发现了一个教程上传斑点（我认为？），但它不工作，因为它使用文件，这是没有定义。
  
  
  

  是有什么办法，我可以通过烧瓶或js转换成物理图像文件的数据？

  
  
  

  THANKYOU！
  

  解决方案

  发现解决方法！
  而不是使用Flask的 file.save（），我用
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  （）我通过指定 filename 和 stream （这是一个blob的FYI ）像这样：
  $ b $ pre $ FileStorage（stream = request.files ['image']）。save（os.path.join app.config ['AUTHOR_FOLDER']，'testpic.jpg'）））


  该脚本躲过了错误400s，几乎没有报废一起工作的功能！哈哈。

  
  
  

  它可以工作，但是我不知道它有多么安全或者它有多稳定，现在就去处理它。如果任何人有任何经验，请帮助我。谢谢！

  
  
  

  生活真棒！

  
  

  Alright so I'm trying to upload a resized canvas image as a file to Flask.

  First I tried to use the canvas.toDataURL() to convert it to a base64(?) string then tried to upload that as an image using formdata with AJAX, no luck.

  Then I tried converting the base64 to a blob using this function:

      function toblob(stuff) {
      var g, type, bi, ab, ua, b, i;
      g = stuff.split(',');
      if (g[0].split('png')[1])
          type = 'png';
      else if (g[0].split('jpeg')[1])
          type = 'jpeg';
      else
          return false;
      bi = atob(g[1]);
      ab = new ArrayBuffer(bi.length);
      ua = new Uint8Array(ab);
      for (i = 0; i < bi.length; i++) {
          ua[i] = bi.charCodeAt(i);
      }
      b = new Blob([ua], {
          type: "image/" + type
      });
      return b;
  }
  

  not image...

  here's the ajax form I used:

  s = new FormData();
  s.append('image', toblob(d)); \\I believe I refer to this with request.files['image']?
  var g = $.ajax({
      url: 'url', 
      type: 'POST',
      processData : false,
      contentType : false, 
      data: s
  }) //POSTDATA
  

  Heres what I have so far serverside:

  @app.route('/requests/<req>', methods=['POST'])
  def requests(req=None): 
          if req == 'upload' and request.method == 'POST' and request.files['file']:
      file = request.files['image'] \\referring to formdata() key
      if file and allowed_file(file.filename):
          n = secure_filename(file.filename)
          file.save(os.path.join(app.config['UPLOAD_FOLDER'],n))
          return redirect(url_for('index', p=n))
  

  ALL THAT ASIDE AND MORE IMPORTANTLY

  I feel pretty confident that the javascript is doing a good job of sending the data as many other stackoverflow questions use the same method for PHP servers and the server is indeed recieving the data.

  My problem is that I don't know how to convert this data into a physical file to store into a directory?

  • I've tried using the upload tutorial but the data isn't a file so that doesn't work.
  • I found one tutorial on how to upload blobs (I think?) but it doesn't work because it uses "files" which isn't defined.

  Is there any way I can convert this data into physical image file through flask or js?

  THANKYOU!

  解决方案

  Found a work-around! instead of using Flask's file.save(), I used werkzeug's FileStorage() Which (as far as I know) a raw version of the file.save() I used it by specifying the filename and stream(which is a blob FYI) like so:

  FileStorage(stream=request.files['image']).save(os.path.join(app.config['AUTHOR_FOLDER'],'testpic.jpg')))
  

  Plopped it down into the script, dodged around the error 400s and barely scrapped together a working function! haha.

  It works but I have no idea how secure it is or how stable it is, just going to go with it for now. If any one has any experience please help me out. Thanks!

  Life is awesome!

  这篇关于如何将画布转换成图像上传到烧瓶？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！