node.js - Cropping a Base64 PNG in-memory using PURE JavaScript on the client side wo using canvas - Stack Overflow

admin管理员组

文章数量:1431434

Context: JavaScript, as part of a SDK (can be on node.js or browser).

Start point: I have a base64 string that's actually a base64 encoded PNG image (I got it from selenium webdriver - takeScreenshot).

Question: How do I crop it?

The techniques involving the canvas seem irrelevant (or am I wrong?). My code runs as part of tests - probably on node.js. The canvas approach doesn't seem to fit here and might also cause additional noise in the image.

All the libraries I found either deal with streams (maybe I should convert the string to stream somehow?) or deal directly with the UI by adding a control (irrelevant for me).

Isn't there something like (promises and callbacks omitted for brevity):

 var base64png = driver.takeScreenshot();
 var png = new PNG(base64png);
 return png.crop(50, 100, 20, 80).toBase64();

?

Thanks!

Context: JavaScript, as part of a SDK (can be on node.js or browser).

Start point: I have a base64 string that's actually a base64 encoded PNG image (I got it from selenium webdriver - takeScreenshot).

Question: How do I crop it?

The techniques involving the canvas seem irrelevant (or am I wrong?). My code runs as part of tests - probably on node.js. The canvas approach doesn't seem to fit here and might also cause additional noise in the image.

All the libraries I found either deal with streams (maybe I should convert the string to stream somehow?) or deal directly with the UI by adding a control (irrelevant for me).

Isn't there something like (promises and callbacks omitted for brevity):

 var base64png = driver.takeScreenshot();
 var png = new PNG(base64png);
 return png.crop(50, 100, 20, 80).toBase64();

?

Thanks!

• javascript
• node.js
• selenium-webdriver
• protractor

Share Improve this question Follow edited Jul 27, 2014 at 13:00 Doron Zavelevsky asked Jul 27, 2014 at 9:15 Doron ZavelevskyDoron Zavelevsky 1,25011 gold badge1111 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Considering you wish to start with base64 string and end with cropped base64 string (image), here is the following code:

var Stream = require('stream');
var gm = require('gm');

var base64png = driver.takeScreenshot();
var stream = new Stream();

stream.on('data', function(data) {
  print data
});

gm(stream, 'my_image.png').crop(WIDTH, HEIGHT, X, Y).stream(function (err, stdout, stderr) {
  var data = '';

  stdout.on('readable', function() {
    data += stream.read().toString('base64');
  });
  stream.on('end', function() {
    // DO something with your new base64 cropped img
  });
});

stream.emit('data', base64png);

Be aware that it is unfinished, and might need some polishing or debugging (I am in no means a node.js guru), but the idea is next:

1. Convert string into stream
2. Read stream into GM module
3. Manipulate the image
4. Save it into a stream
5. Convert stream back into 64base string

Adding my previous ment as an answer:

Anyone looking to do this will need to decode the image to get the raw image data using a library such as node-pngjs and manipulate the data yourself (perhaps there is a library for such operations that doesn't rely on the canvas).

本文标签：