上传HTML5画布图像到服务器Angular2/Spring Boot

我试图上传HTML5画布图像到服务器。不幸的是，当我将画布转换为blob并将其上传到服务器时，我无法打开图像。上传HTML5画布图像到服务器Angular2/Spring Boot

我的执行是工作的罚款与以下情况下）：

权在画布上，并保存通过具有type =“file”输入形式
选择画布图像文件格式的磁盘单击以图像磁盘
发送文件
读取上传文件

所需的方案B）：在FORMDATA对象通过AJAX

获取图像数据直接从帆布
发送帆布数据
读取上传文件

当我打开直接从png文件上传画布（场景b）图像是空白的，但我可以看到它有正确的宽度和高度。当我比较正确的文件在记事本文件中的内容具有相同的乞讨/结束，但在中间不同。请求中的唯一区别是内容长度。

技术堆栈：角2.4.6 春季启动1.5.2

方案一）与文件上传：

var files = event.srcElement.files; 
let formData = new FormData(); 
formData.append('file', files[0], files[0].name); 
let headers = new Headers(); 
headers.append('Authorization', currentUser.token); 
let options = new RequestOptions({ headers }); 
this.http.post(this.apiUrl, formData, options) 
    .map((response: Response) => { 
     return response; 
    }) 
    .catch(this.handleError);

方案一）要求：

Request URL:http://localhost:8080/public/api/image 
Request Method:POST 
Status Code:200 
Remote Address:[::1]:8080 
Referrer Policy:no-referrer-when-downgrade 
Response Headers 
    view source 
    Access-Control-Allow-Credentials:true 
    Access-Control-Allow-Origin:http://localhost:3000 
    Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
    Content-Length:0 
    Content-Type:application/json;charset=ISO-8859-1 
    Date:Fri, 21 Apr 2017 07:11:09 GMT 
    Expires:0 
    Pragma:no-cache 
    Vary:Origin 
    X-Content-Type-Options:nosniff 
    X-Frame-Options:DENY 
    X-XSS-Protection:1; mode=block 
Request Headers 
    view source 
    Accept:application/json, text/plain, */* 
    Accept-Encoding:gzip, deflate, br 
    Accept-Language:en-US,en;q=0.8,pl;q=0.6 
    Authorization:eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1ZGllbmNlIjoid2ViIiwiY3JlYXRlZCI6MTQ5MjU0Nzc5OTYxMiwiZXhwIjoxNDkzMTUyNTk5fQ.YKhBf1bOS-egqLahtIFWI5t2vrAEbwHss96itIO8HanKU0V38XdOOY-ZJV41wE5oSqmOoGVUYXJMoxXYrLOzXw 
    Connection:keep-alive 
    Content-Length:25242 
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryWh6h4VZ1UIs13Tal 
    Host:localhost:8080 
    Origin:http://localhost:3000 
    Referer:http://localhost:3000/ 
    User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 
    Request Payload 
    ------WebKitFormBoundaryWh6h4VZ1UIs13Tal 
    Content-Disposition: form-data; name="file"; filename="download.png" 
    Content-Type: image/png 


------WebKitFormBoundaryWh6h4VZ1UIs13Tal--

HERE问题情景b）画布内容：

let canvas = <HTMLCanvasElement> document.getElementById('main_canvas_container').firstElementChild; 
     canvas.toBlob((blob) => { 
    let formData = new FormData(); 
    formData.append('file', blob, 'file.png'); 
    let headers = new Headers(); 
    headers.append('Authorization', currentUser.token); 
    let options = new RequestOptions({ headers }); 
    this.http.post(this.apiUrl, formData, options) 
     .map((response: Response) => { 
      return response; 
     }) 
     .catch(this.handleError); 
}

方案b）要求：

Request URL:http://localhost:8080/public/api/image 
Request Method:POST 
Status Code:200 
Remote Address:[::1]:8080 
Referrer Policy:no-referrer-when-downgrade 
Response Headers 
    view source 
    Access-Control-Allow-Credentials:true 
    Access-Control-Allow-Origin:http://localhost:3000 
    Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
    Content-Length:0 
    Content-Type:application/json;charset=ISO-8859-1 
    Date:Fri, 21 Apr 2017 07:00:17 GMT 
    Expires:0 
    Pragma:no-cache 
    Vary:Origin 
    X-Content-Type-Options:nosniff 
    X-Frame-Options:DENY 
    X-XSS-Protection:1; mode=block 
Request Headers 
    view source 
    Accept:application/json, text/plain, */* 
    Accept-Encoding:gzip, deflate, br 
    Accept-Language:en-US,en;q=0.8,pl;q=0.6 
    Authorization:eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1ZGllbmNlIjoid2ViIiwiY3JlYXRlZCI6MTQ5MjU0Nzc5OTYxMiwiZXhwIjoxNDkzMTUyNTk5fQ.YKhBf1bOS-egqLahtIFWI5t2vrAEbwHss96itIO8HanKU0V38XdOOY-ZJV41wE5oSqmOoGVUYXJMoxXYrLOzXw 
    Connection:keep-alive 
    Content-Length:11552 
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylO2dld6ISjr1W9E6 
    Host:localhost:8080 
    Origin:http://localhost:3000 
    Referer:http://localhost:3000/ 
    User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 
    Request Payload 
    ------WebKitFormBoundarylO2dld6ISjr1W9E6 
    Content-Disposition: form-data; name="file"; filename="file.png" 
    Content-Type: image/png 


------WebKitFormBoundarylO2dld6ISjr1W9E6--

服务器端：

@PostMapping("/public/api/image") 
public ResponseEntity<String> handleFileUpload(@RequestParam MultipartFile file) { 
    try { 
     Files.copy(file.getInputStream(), this.rootLocation.resolve(file.getOriginalFilename())); 
    } catch (IOException e) { 
     throw new StorageException("Failed to store file " + file.getOriginalFilename(), e); 
    } 
    return ResponseEntity.ok(""); 
}

来源

2017-04-21 mrh

原来，它是负责我的画布（Blend4Web）呈现内容框架的问题。当我直接从框架提供的方法获取blob对象时，我能够毫无问题地上传文件。我共享的代码工作正常，因此可以用作参考。我向那些花时间分析它的人道歉。

来源

2017-05-09 12:38:06 mrh

上传HTML5画布图像到服务器Angular2/Spring Boot

回答

相关问题