75326

How to open image in javascript,sent by express.js sendfile function[+SOLUTION]

Question:

I have a simple server which has this method

app.post('/', function (req, res) { res.sendfile(path.resolve(req.files.image.path)); });

How do I get data, on client side in Image object? this is my ajax.success method,at least what i tried...

success: function (res) { console.log(res); var canvas = document.getElementById("mainCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function () { ctx.drawImage(img,0,0); } img.src=res }

Really looking for answer already for 2 days... tried a lot of ways, but none worked. I am not even sure what I receive from server - is it bytes array?

<strong>SOLUTION:</strong> so, i figured out that post request does not need to send file back, Image.src sends its own get request to server

app.post('/', function (req, res) { res.send(path.basename(req.files.image.path)); }); /* serves all the static files */ app.get(/^(.+)$/, function(req, res){ console.log('static file request : ' + req.params); res.sendfile( __dirname + req.params[0]); });

client:

success: function (res) { var canvas = document.getElementById("mainCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); console.log(res); img.onload = function () { ctx.drawImage(img,0,0); } img.src="/uploads/"+res; }

Answer1:

You are trying to set the src attribute of the image to the byte code of the image you returned, which will not work. You need to set it to the path of the image that you want to display. The Image object will perform a GET request to your server on its own, so there is no need for an ajax request. Something like the following should work for you:

client:

var canvas = document.getElementById("mainCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "/imagepath.png"; img.onload = function () { ctx.drawImage(img,0,0); }

server:

app.get('/imagepath.png', function (req, res) { res.sendfile(path.resolve(path.resolve(__dirname,'/imagepath.png'))); });

Recommend

  • Get byte[] from
  • How to Filter ListAdapter using getFilter() within a fragment
  • IndexSizeError on drawImage on IE and Edge
  • Python PIL to extract number from image
  • Google OAuth: can't get refresh token with authorization code
  • How to draw a line dynamically in android [duplicate]
  • Outputting SharePoint Hyperlink Column as URL
  • Disable Kendo Autocomplete
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • nonblocking BIO_do_connect blocked when there is no internet connected
  • How to view images from protected folder with php?
  • Adjust width of select element according to selected option's width
  • Detect when Facebook like button is clicked
  • Chart.js Multiple dataset
  • Needing to do .toArray() to get output of mongodb .find() on key name not value
  • How to render a blob on a canvas element?
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Django rest serializer Breaks when data exists
  • Get data from AJAX - How to
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Bug in WPF DataGrid
  • Trying to switch camera back to front but getting exception
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • How to pass list parameters for each object using Spring MVC?
  • AT Commands to Send SMS not working in Windows 8.1
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • How to delete a row from a dynamic generate table using jquery?
  • AngularJs get employee from factory
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Free memory of cv::Mat loaded using FileStorage API
  • using HTMLImports.whenReady not working in chrome
  • Angular 2 constructor injection vs direct access
  • How do I configure my settings file to work with unit tests?
  • Authorize attributes not working in MVC 4
  • Is it possible to post an object from jquery to bottle.py?
  • EntityFramework adding new object to nested object collection
  • Programmatically clearing map cache
  • Android Heatmap on canvas or ImageView