preface

The “go from” to “proficient” in Node.js is a Flag that has been around for a long time, and has been around since last year. Awakening of Insects has passed, the wind warm clouds open, the next year’s Flag is the time to take out to achieve. I decide to choose the latter.

At least the exploration of Node.js will have a perfect exclamation point this year.

Specific goals

Images are one of the “top streams” of multimedia, and this article focuses on unlocking node’s ability to manipulate images, while gaining fun and skill.

Go with the flow of nowhere, ride the wind and waves to aid the sea

Normal operation

node-images

Image processing library – Node-iamges, which is a lightweight cross-platform image codec library of Node.js.

features

  • Lightweight: No image processing libraries need to be installed.
  • Cross-platform: A compiled. Node file is available for download on Windows.
  • Easy to use: Jquery-style API, easy to rely on.

The installation

npm install images
Copy the code

Pay attention to

  • Dyld: lazy symbol binding failed: symbol not found Dyld: lazy symbol binding failed: symbol not found (Issues)

Get image properties

  • .size([width[, height]]) : Gets or sets the image width and height.
  • .width([width]) : Gets or sets the image width, if no value is specified, otherwise sets the image width;
  • .height([height]) : Gets or sets the image height, if no value is specified, otherwise sets the image height;
const images = require('images'); 
const width = images('compose-bg-2.jpeg').width(); 
const height = images('compose-bg-2.jpeg').height(); 
const properties = images('compose-bg-2.jpeg').size(); 
console.log(width); / / 1080
console.log(height); / / 1339
console.log(properties); // { width: 1080, height: 1339 }
Copy the code

Cut out pictures

There are three main apis for cropping images

  • Images (image[, x, y, width, height]) : Create an image by copying an area from another image
  • .resize(width[, height]) : sets the image width and height. If height is not specified, the image will be scaled according to the current width and height ratio, using bicubic algorithm by default.
  • .save(file[, type[, config]]) : encodes and saves the current image to file. If type is not specified, the file type is automatically determined according to file. Config is the image setting
const images = require('images');
images(images('compose-bg-2.jpeg'), 0.889.1080.450).resize(540).save('compose-bg-region.jpg');
Copy the code

Finally, the bottom of the original image compose- BG-2.jpeg is captured and the new image compose- bg-region-jpg is generated by scaling the original image compose- bg-region-jpg

Synthetic images

Draw provides a drawing API for Node-images that allows you to set the position of the image to be drawn to

  • .draw(image, x, y) : Draw an image image on the current image (x, y)
const images = require('images');
images('compose-bg.jpg').draw(images('compose-text.jpg'), 709.14).save('compose-new.jpg', {
  quality: 100.// Save the image to a file with a quality of 100
});
Copy the code

Drawing picture B onto picture A finally produces A composite picture, which can be applied to some copywriting or watermarking scenes.

Rotating images

  • .rotate(Angle) : rotates the current image.
  • RotateAPI is not shown on the introduction page. It is available in the test file in the separate source code. I tried it out and it worked.
const images = require('images');
// Rotate 90 degrees clockwise
images('compose-bg-2.jpeg').rotate(90).save('compose-rotate-90.jpg', {
  quality: 100.// Save the image to a file with a quality of 100
});
// Rotate 270 degrees clockwise, or 90 degrees anticlockwise
images('compose-bg-2.jpeg').rotate(270).save('compose-rotate-270.jpg', {
  quality: 100.// Save the image to a file with a quality of 100
});
Copy the code

“Top flow” is not the same as the human fireworks

Send you a red heart

  • Select an image as the background of the final composite image;
  • The left half of the red heart is rotated 90 degrees clockwise with rotate to become vertical.
  • Draw the left half of the heart on the background with Draw (100, 200);
  • The right half of the red heart is rotated 90 degrees clockwise with rotate to become vertical.
  • Draw the right half of the heart on the background with Draw at (300, 200);
  • Use Save to save the final image.
const images = require('images');
const bg = images('compose-bg-2.jpeg');
const left = images('compose-heart-left.png');
const rignt = images('compose-heart-right.png');
bg.draw(left.rotate(90), 100.200).draw(rignt.rotate(90), 300.200).save('compose-heart-new.jpg', {
  quality: 100.// Save the image to a file with a quality of 100
});
Copy the code

The final composite image

Head cut

  • Image cropping: Select an image, set the width and height after cropping, and use resize to reset the image size.
  • Either the width or the height can be set, and the other will take the value of the width or height.
  • Set the maximum size that can be clipped, because picture clipping can not be set to a larger size than the original picture, otherwise an error will be reported;
const images = require('images');
/** * The maximum width and height of a clipable image cannot exceed the width and height of the original image *@param {number} MaxWidth Maximum width *@param {number} MaxHeight Maximum height */
images.setLimitMax = function (maxWidth, maxHeight) {
  images.maxHeight = maxHeight;
  images.maxWidth = maxWidth;
  return images;
};
// Set the maximum width that can be clipped
images.setLimitMax(800.800);
/** ** cut out *@param {string} Img needs to crop the original image *@param {number} Width Indicates the trimmed width *@param {number} Hight Clipped width */
function tailorUserAvatar(img, width, hight) {
  if (width > images.maxWidth || hight > images.maxHeight) {
    throw new Error('Width and height must not exceed the maximum width and height of the picture that can be clipped.');
  }
  // When only one item is set for width and height, the other item takes the value of the item
  const widthNew = width || hight;
  const hightNew = width || hight;

  // After clipping the image name
  const pathName = `avatar-${widthNew}-${hightNew}.jpg`;

  // Crop and save the new image
  images(img).resize(widthNew, hightNew).save(pathName);
}
tailorUserAvatar('avatar.jpg'.200);
Copy the code

The program will throw an error if the size is set to more than 600 by 600

tailorUserAvatar('avatar.jpg'.1000);
Copy the code

conclusion

I will use Node to develop the actual project, although there is no need for business at present, but it is prepared.

Kang Su asked, “Do you also know how to shoot? Isn’t my shooting also fine?” Weng said, “There is no other, but his hand is familiar.” Kang Su angrily said: “You dare light I shoot!” Weng said, “I know it by drinking oil.” He took a gourd and put it on the ground, covered its mouth with money, and dripped oil from the money hole, but the money was not wet. He said, “I have no one but my hand.