Загрузка угловых изображений js

Question

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

Изображение сгенерировано для отображения на холсте (на самом деле экрана печати) и должно быть опубликовано на сервере по мере его создания.

Я использую Node js для backend (Express-сервер) и Angular для frontend.

Любая помощь или идеи приветствуются!

Заранее спасибо.

Answer 1

Так что вам нужно:

1. рисовать на холсте

   var canvas = document.createElement('canvas'); 
   canvas.width = 600; 
   canvas.height = 600; 
   var context = canvas.getContext('2d'); 
   
   context.beginPath(); 
   context.moveTo(100, 150); 
   context.lineTo(450, 50); 
   context.lineWidth = 10; 
   
   // set line color 
   context.strokeStyle = '#ff0000'; 
   context.stroke(); 
   

2. кодировать данные холст в формате вашего выбора (скажем, JPG)

   function dataURItoBlob(dataURI) { 
       var binary = atob(dataURI.split(',')[1]); 
       var array = []; 
       for (var i = 0; i < binary.length; i++) { 
       array.push(binary.charCodeAt(i)); 
       } 
       return new Blob([new Uint8Array(array)], { 
       type: 'image/jpeg' 
       }); 
   } 
   
   function canvasToJPG(cvs, done) { 
       var quality = 90; // jpeg quality 
   
       if (cvs.toBlob) // some browsers has support for toBlob 
       cvs.toBlob(done, 'image/jpeg', quality/100); 
       else 
       done(dataURItoBlob(cvs.toDataURL('image/jpeg', quality/100))); 
   } 
   

3. отправьте его на провод, используя AngularJS $http

   $http 
   ({ 
       method: 'POST', 
       url: '/upload', 
       headers: {'Content-Type': 'image/jpeg'}, 
       data: data, 
       transformRequest: [] 
   }) 
   .success(function() 
   { 
       alert('image uploaded :)'); 
   }) 
   .error(function (err) 
   { 
       console.log('upload error',err); 
       alert('something went wrong :('); 
   }); 
   

4а. получить его с вашего маршрута ExpressJS на узле (скажем, потокового его на fs)

app.post('/upload', function(req, res, next) { 
     var wstream= fs.createWriteStream('uploaded.jpg'); // say you want to write the file to disk 

     req.pipe(wstream) // pipe the http request body to the file stream 
     .on('error',next) // something went wrong with the fs, return 500 
     .on('finish',function() { 
      res.status(204).send(); // success! 
     }); 
    }); 

4b. получить его из ExpressJS маршрута на узел (скажем, вы хотите необработанный буфер JPG)

app.post('/upload', function(req, res, next) { 
     var buff= []; 

     req.on('data',function (data) 
     { 
      buff.push(data); 
     }) 
     .on('error',next) 
     .on('end',function() { 
      fs.writeFile('uploaded.jpg',Buffer.concat(buff),function (err) 
      { 
       if (err) return next(err); // something went wrong with the fs, return 500 

       res.status(204).send(); // success! 
      }); 
     }); 
    }); 

Полный пример:

var myapp = angular.module('myapp', []); 
 

 
myapp.controller('upload', function($scope, $http) { 
 
    $scope.drawAndUpload = function() { 
 
    var canvas = document.createElement('canvas'); 
 
    canvas.width = 600; 
 
    canvas.height = 600; 
 
    var context = canvas.getContext('2d'); 
 

 
    context.beginPath(); 
 
    context.moveTo(100, 150); 
 
    context.lineTo(450, 50); 
 
    context.lineWidth = 10; 
 

 
    // set line color 
 
    context.strokeStyle = '#ff0000'; 
 
    context.stroke(); 
 

 
    var upload = function(data) { 
 
     $http 
 
     ({ 
 
      method: 'POST', 
 
      url: '/upload', 
 
      headers: { 
 
      'Content-Type': 'image/jpeg' 
 
      }, 
 
      data: data, 
 
      transformRequest: [] 
 
     }) 
 
     .success(function() { 
 
      alert('image uploaded :)'); 
 
     }) 
 
     .error(function(err) { 
 
      console.log('upload error', err); 
 
      alert('something went wrong :('); 
 
     }); 
 
    }; 
 

 
    canvasToJPG(canvas, upload); 
 
    }; 
 
}); 
 

 
function dataURItoBlob(dataURI) { 
 
    var binary = atob(dataURI.split(',')[1]); 
 
    var array = []; 
 
    for (var i = 0; i < binary.length; i++) { 
 
    array.push(binary.charCodeAt(i)); 
 
    } 
 
    return new Blob([new Uint8Array(array)], { 
 
    type: 'image/jpeg' 
 
    }); 
 
} 
 

 
function canvasToJPG(cvs, done) { 
 
    var quality = 90; // jpeg quality 
 

 
    if (cvs.toBlob) // some browsers has support for toBlob 
 
    cvs.toBlob(done, 'image/jpeg', quality/100); 
 
    else 
 
    done(dataURItoBlob(cvs.toDataURL('image/jpeg', quality/100))); 
 
}

<html> 
 

 
<head> 
 
    <title>My Angular App</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-app="myapp" ng-controller="upload"> 
 
    <button ng-click="drawAndUpload()">Draw & Upload</button> 
 
</body> 
 

 
</html>

var express = require('express'), 
 
    fs = require('fs'); 
 
var app = express(); 
 

 
app.use(express.static('www')); 
 

 
app.post('/upload', function(req, res, next) { 
 
    var buff= []; 
 

 
    req.on('data',function (data) 
 
    { 
 
     buff.push(data); 
 
    }) 
 
    .on('error',next) // something went wrong with the fs, return 500 
 
    .on('end',function() { 
 
     fs.writeFile('uploaded.jpg',Buffer.concat(buff),function (err) 
 
     { 
 
      if (err) return next(err); 
 

 
      res.status(204).send(); // success! 
 
     }); 
 
    }); 
 
}); 
 

 
app.listen(8080);