Laravel Intervention/image processing extended package installation, usage, and possible pitfalls,

Source: Internet
Author: User
Tags autoload image processing library imagemagick

Laravel Intervention/image processing extended package installation, usage, and possible pitfalls,

Preface

Intervention/image is an image processing tool customized for Laravel. It provides an easy-to-express way to create and edit images.

For the Demo code, see:

Github: https://github.com/zhengjinghua/est-image-demo

Http://xiazai.jb51.net/201711/yuanma/est-image-demo (jb51.net).rar

Demo

Demo


Run Demo

See how to use Homestead to quickly run a Laravel project.

Article Overview

  • Installation;
  • Modify configuration information;
  • Basic usage;
  • Special features.

Next is a detailed explanation.

1. Install

1). Use composer to install:

composer require intervention/image

The above command will

2). Modify app/config/app. php to add ServiceProvider:

// Add the following code to the providers array: 'providers '=> [//... intervention \ Image \ ImageServiceProvider: class, //...], // Add the following code to the aliases array: 'aliases' => [//... 'image' => Intervention \ Image \ Facades \ Image: class, //...],

2. Image Processing library Configuration

By default, this extension package uses the GD library of PHP for image processing. However, the image processing efficiency of the GD library is slightly inferior to that of the imagemagick library, therefore, we recommend replacing it with the imagemagick library for image processing.

Before you start, make sure that GD or Imagick has been installed locally.

When Intervention Image is used, you only need to pass an array parameter to ImageManager to switch between the GD and Imagick libraries.

As follows:

// Introduce composer autoloadrequire 'vendor/autoload. php'; // import Intervention Image Manager Classuse Intervention \ Image \ ImageManager; // create an image manager instance by specifying the driver $ manager = new ImageManager (array ('driver '=> 'imagick ')); // create an image instance $ image = $ manager-> make ('Public/foo.jpg ')-> resize (300,200 );

You can also use the static version of ImageManager as follows:

// Introduce composer autoloadrequire 'vendor/autoload. php'; // import Intervention Image Manager Classuse Intervention \ Image \ ImageManagerStatic as Image; // create an image manager instance by specifying the driver (gd is used by default) Image :: configure (array ('driver '=> 'imagick'); // finally create an image instance $ image = Image: make ('Public/foo.jpg ') -> resize (300,200 );

Generate the config/image. php configuration file:

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

After running the preceding command, the config/image. php configuration file is generated in the project. Open this file and change the driver to imagick:

return array( 'driver' => 'imagick');

At this point, this expansion package is successfully installed!

3. Basic usage

// Modify the size of the specified Image $ img = Image: make ('images/avatar.jpg ')-> resize (200,200); // Insert the watermark, which is located in the bottom right corner of the original Image, 10 pixels away from the bottom margin, 15 pixels away from the right $ img-> insert ('images/watermark.png ', 'bottom-right', 15, 10 ); // save the processed image to another path $ img-> save ('images/new_avatar.jpg '); /* The above logic can be done through the chained expression */$ img = Image: make ('images/avatar.jpg ')-> resize (200,200) -> insert ('images/new_avatar.jpg ', 'bottom-right', 15, 10 );

4. Special Features

In addition to the basic usage described above, this extension package also supports:

  • Image Upload function;
  • Image caching;
  • Image Filtering: Convert images according to unified rules;
  • Dynamic Image Processing: automatically adjusts the image size based on the URL parameters of the accessed image.

For more examples, see the official documentation.

A small pitfall in intervention/image and its method of cracking

In fact, intervention/iamge has been used for a long time. Its api design is concise, its documentation is comprehensive, and it is quite easy to use.

However, a small pitfall was accidentally discovered recently. Because we need to synthesize the QR code with an avatar, I use Image: make ($ avatarUrl) (here $ avatarUrl is the link of the Avatar) to generate an avatar, then it is merged into the QR code image (other operations, such as using the template background and writing text ).

After writing the script, it was found that it was quite slow and took about 23 seconds on average. At first, I thought it was because there were many operations and large sizes during the synthesis process. This was the speed. However, when I got idle, I began to try optimization. Even if I couldn't increase the speed, I should at least find out why it was so time-consuming.

After all, I found that the truth had little to do with the size and size of the merging operation. The key lies in the posture of creating Avatar data.

To illustrate this problem, I wrote the following code for comparison.

// Record start time $ startTimestamp = microtime (true); $ url = 'HTTP: // response = \ Image: make ($ url ); // record end time $ endTimestamp = microtime (true); info ($ startTimestamp); info ($ endTimestamp-$ startTimestamp );


The above Code uses the Image: make ($ url) form to generate an avatar directly from the url. From the log data recorded, it takes about 16 seconds.

Later, I thought of a new posture, that is, I thought of it when I tried to optimize it. See the following code:

$startTimestamp = microtime(true);$client = new \GuzzleHttp\Client();$url = 'http://wx.qlogo.cn/mmopen/XxT9TiaJ1ibf06TNRCMjQADS4opDHvQLguLZHpqkRlvuJYZicvJW4iaOalPsKIs0kpZ3F6864ZzibyObYiaucUQSrdp4pFTNDyIpxw/0';$avatarResponse = $client->get($url);$avatar = \Image::make($avatarResponse->getBody()->getContents());$endTimestamp = microtime(true);info($startTimestamp);info($endTimestamp);info($endTimestamp - $startTimestamp);

Here, I first use GuzzleHttp to get the Avatar, and then use Image: make ($ data) to create the Avatar.

Note: It's a climax ...... Sunglasses

Take a look at the following log, the average time of three times is about 0.07 seconds, compared with the previous 16 seconds, the difference is more than 200 times.


I have not figured out why this phenomenon occurs, but it is undoubtedly a useful and niche experience.

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.