mirror of
https://github.com/codeigniter4/CodeIgniter4.git
synced 2025-02-20 11:44:28 +08:00
600 lines
36 KiB
HTML
600 lines
36 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Image Manipulation Class — CodeIgniter4 4.0.0-alpha.5 documentation</title>
|
|
|
|
|
|
|
|
|
|
<link rel="shortcut icon" href="../_static/ci-icon.ico"/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../_static/css/citheme.css" type="text/css" />
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="top" title="CodeIgniter4 4.0.0-alpha.5 documentation" href="../index.html"/>
|
|
<link rel="up" title="Library Reference" href="index.html"/>
|
|
<link rel="next" title="Pagination" href="pagination.html"/>
|
|
<link rel="prev" title="Honeypot Class" href="honeypot.html"/>
|
|
|
|
|
|
<script src="../_static/js/modernizr.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body class="wy-body-for-nav" role="document">
|
|
|
|
|
|
<div class="wy-grid-for-nav">
|
|
|
|
|
|
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
|
|
<div class="wy-side-scroll">
|
|
<div class="wy-side-nav-search">
|
|
|
|
|
|
|
|
<a href="../index.html" class="icon icon-home"> CodeIgniter4
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div role="search">
|
|
<form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
|
|
<input type="text" name="q" placeholder="Search docs" />
|
|
<input type="hidden" name="check_keywords" value="yes" />
|
|
<input type="hidden" name="area" value="default" />
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Welcome to CodeIgniter4</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../installation/index.html">Installation</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../tutorial/index.html">Tutorial</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../concepts/index.html">CodeIgniter4 Overview</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../general/index.html">General Topics</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../incoming/index.html">Controllers and Routing</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../outgoing/index.html">Building Responses</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../database/index.html">Working With Databases</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../models/index.html">Modeling Data</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../dbmgmt/index.html">Managing Databases</a></li>
|
|
</ul>
|
|
<ul class="current">
|
|
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Library Reference</a><ul class="current">
|
|
<li class="toctree-l2"><a class="reference internal" href="caching.html">Caching Driver</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="curlrequest.html">CURLRequest Class</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="files.html">Working with Files</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="honeypot.html">Honeypot Class</a></li>
|
|
<li class="toctree-l2 current"><a class="current reference internal" href="#">Image Manipulation Class</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="pagination.html">Pagination</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="security.html">Security Class</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="sessions.html">Session Library</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="throttler.html">Throttler</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="time.html">Dates and Times</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="typography.html">Typography</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="uploaded_files.html">Working with Uploaded Files</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="uri.html">Working with URIs</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="user_agent.html">User Agent Class</a></li>
|
|
<li class="toctree-l2"><a class="reference internal" href="validation.html">Validation</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../helpers/index.html">Helpers</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../testing/index.html">Testing</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../cli/index.html">Command Line Usage</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../extending/index.html">Extending CodeIgniter</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li class="toctree-l1"><a class="reference internal" href="../license.html">The MIT License (MIT)</a></li>
|
|
<li class="toctree-l1"><a class="reference internal" href="../changelogs/index.html">Change Logs</a></li>
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
|
|
|
|
|
|
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
|
|
|
|
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
|
|
<a href="../index.html">CodeIgniter4</a>
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
<div class="wy-nav-content">
|
|
<div class="rst-content">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div role="navigation" aria-label="breadcrumbs navigation">
|
|
|
|
<ul class="wy-breadcrumbs">
|
|
|
|
<li><a href="../index.html">Docs</a> »</li>
|
|
|
|
<li><a href="index.html">Library Reference</a> »</li>
|
|
|
|
<li>Image Manipulation Class</li>
|
|
|
|
|
|
<li class="wy-breadcrumbs-aside">
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
<hr/>
|
|
</div>
|
|
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
|
|
<div itemprop="articleBody">
|
|
|
|
<div class="section" id="image-manipulation-class">
|
|
<h1>Image Manipulation Class<a class="headerlink" href="#image-manipulation-class" title="Permalink to this headline">¶</a></h1>
|
|
<p>CodeIgniter’s Image Manipulation class lets you perform the following
|
|
actions:</p>
|
|
<ul class="simple">
|
|
<li>Image Resizing</li>
|
|
<li>Thumbnail Creation</li>
|
|
<li>Image Cropping</li>
|
|
<li>Image Rotating</li>
|
|
<li>Image Watermarking</li>
|
|
</ul>
|
|
<p>The following image libraries are supported: GD/GD2, and ImageMagick.</p>
|
|
<div class="contents local topic" id="contents">
|
|
<ul class="simple">
|
|
<li><a class="reference internal" href="#initializing-the-class" id="id1">Initializing the Class</a><ul>
|
|
<li><a class="reference internal" href="#processing-an-image" id="id2">Processing an Image</a></li>
|
|
<li><a class="reference internal" href="#processing-methods" id="id3">Processing Methods</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="section" id="initializing-the-class">
|
|
<h2><a class="toc-backref" href="#id1">Initializing the Class</a><a class="headerlink" href="#initializing-the-class" title="Permalink to this headline">¶</a></h2>
|
|
<p>Like most other classes in CodeIgniter, the image class is initialized
|
|
in your controller by calling the Services class:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nv">$image</span> <span class="o">=</span> <span class="nx">Config\Services</span><span class="o">::</span><span class="na">image</span><span class="p">();</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>You can pass the alias for the image library you wish to use into the
|
|
Service function:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nv">$image</span> <span class="o">=</span> <span class="nx">Config\Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>The available Handlers are as follows:</p>
|
|
<ul class="simple">
|
|
<li>gd The GD/GD2 image library</li>
|
|
<li>imagick The ImageMagick library.</li>
|
|
</ul>
|
|
<p>If using the ImageMagick library, you must set the path to the library on your
|
|
server in <strong>app/Config/Images.php</strong>.</p>
|
|
<div class="admonition note">
|
|
<p class="first admonition-title">Note</p>
|
|
<p class="last">The ImageMagick handler does NOT require the imagick extension to be
|
|
loaded on the server. As long as your script can access the library
|
|
and can run <code class="docutils literal"><span class="pre">exec()</span></code> on the server, it should work.</p>
|
|
</div>
|
|
<div class="section" id="processing-an-image">
|
|
<h3><a class="toc-backref" href="#id2">Processing an Image</a><a class="headerlink" href="#processing-an-image" title="Permalink to this headline">¶</a></h3>
|
|
<p>Regardless of the type of processing you would like to perform
|
|
(resizing, cropping, rotation, or watermarking), the general process is
|
|
identical. You will set some preferences corresponding to the action you
|
|
intend to perform, then call one of the available processing functions.
|
|
For example, to create an image thumbnail you’ll do this:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nv">$image</span> <span class="o">=</span> <span class="nx">Config\Services</span><span class="o">::</span><span class="na">image</span><span class="p">()</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">fit</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="s1">'center'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'/path/to/image/mypic_thumb.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>The above code tells the library to look for an image
|
|
called <em>mypic.jpg</em> located in the source_image folder, then create a
|
|
new image from it that is 100 x 100pixels using the GD2 image_library,
|
|
and save it to a new file (the thumb). Since it is using the fit() method,
|
|
it will attempt to find the best portion of the image to crop based on the
|
|
desired aspect ratio, and then crop and resize the result.</p>
|
|
<p>An image can be processed through as many of the available methods as
|
|
needed before saving. The original image is left untouched, and a new image
|
|
is used and passed through each method, applying the results on top of the
|
|
previous results:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nv">$image</span> <span class="o">=</span> <span class="nx">Config\Services</span><span class="o">::</span><span class="na">image</span><span class="p">()</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">reorient</span><span class="p">()</span>
|
|
<span class="o">-></span><span class="na">rotate</span><span class="p">(</span><span class="mi">90</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">crop</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'/path/to/image/mypic_thumb.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>This example would take the same image and first fix any mobile phone orientation issues,
|
|
rotate the image by 90 degress, and then crop the result into a 100x100 pixel image,
|
|
starting at the top left corner. The result would be saved as the thumbnail.</p>
|
|
<div class="admonition note">
|
|
<p class="first admonition-title">Note</p>
|
|
<p class="last">In order for the image class to be allowed to do any
|
|
processing, the folder containing the image files must have write
|
|
permissions.</p>
|
|
</div>
|
|
<div class="admonition note">
|
|
<p class="first admonition-title">Note</p>
|
|
<p class="last">Image processing can require a considerable amount of server
|
|
memory for some operations. If you are experiencing out of memory errors
|
|
while processing images you may need to limit their maximum size, and/or
|
|
adjust PHP memory limits.</p>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="processing-methods">
|
|
<h3><a class="toc-backref" href="#id3">Processing Methods</a><a class="headerlink" href="#processing-methods" title="Permalink to this headline">¶</a></h3>
|
|
<p>There are six available processing methods:</p>
|
|
<ul class="simple">
|
|
<li>$image->crop()</li>
|
|
<li>$image->fit()</li>
|
|
<li>$image->flatten()</li>
|
|
<li>$image->flip()</li>
|
|
<li>$image->resize()</li>
|
|
<li>$image->rotate()</li>
|
|
<li>$image->text()</li>
|
|
</ul>
|
|
<p>These methods return the class instance so they can be chained together, as shown above.
|
|
If they fail they will throw a <code class="docutils literal"><span class="pre">CodeIgniter\Images\ImageException</span></code> that contains
|
|
the error message. A good practice is to catch the exceptions, showing an
|
|
error upon failure, like this:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="k">try</span> <span class="p">{</span>
|
|
<span class="nv">$image</span> <span class="o">=</span> <span class="nx">Config\Services</span><span class="o">::</span><span class="na">image</span><span class="p">()</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">fit</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="s1">'center'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'/path/to/image/mypic_thumb.jpg'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="k">catch</span> <span class="p">(</span><span class="nx">CodeIgniter\Images\ImageException</span> <span class="nv">$e</span><span class="p">)</span>
|
|
<span class="p">{</span>
|
|
<span class="k">echo</span> <span class="nv">$e</span><span class="o">-></span><span class="na">getMessage</span><span class="p">();</span>
|
|
<span class="p">}</span>
|
|
</pre></div>
|
|
</div>
|
|
<div class="admonition note">
|
|
<p class="first admonition-title">Note</p>
|
|
<p>You can optionally specify the HTML formatting to be applied to
|
|
the errors, by submitting the opening/closing tags in the function,
|
|
like this:</p>
|
|
<div class="last highlight-ci"><div class="highlight"><pre><span></span><span class="nv">$this</span><span class="o">-></span><span class="na">image_lib</span><span class="o">-></span><span class="na">display_errors</span><span class="p">(</span><span class="s1">'<p>'</span><span class="p">,</span> <span class="s1">'</p>'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="cropping-images">
|
|
<h4>Cropping Images<a class="headerlink" href="#cropping-images" title="Permalink to this headline">¶</a></h4>
|
|
<p>Images can be cropped so that only a portion of the original image remains. This is often used when creating
|
|
thumbnail images that should match a certain size/aspect ratio. This is handled with the <code class="docutils literal"><span class="pre">crop()</span></code> method:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">crop</span><span class="p">(</span><span class="nx">int</span> <span class="nv">$width</span> <span class="o">=</span> <span class="k">null</span><span class="p">,</span> <span class="nx">int</span> <span class="nv">$height</span> <span class="o">=</span> <span class="k">null</span><span class="p">,</span> <span class="nx">int</span> <span class="nv">$x</span> <span class="o">=</span> <span class="k">null</span><span class="p">,</span> <span class="nx">int</span> <span class="nv">$y</span> <span class="o">=</span> <span class="k">null</span><span class="p">,</span> <span class="nx">bool</span> <span class="nv">$maintainRatio</span> <span class="o">=</span> <span class="k">false</span><span class="p">,</span> <span class="nx">string</span> <span class="nv">$masterDim</span> <span class="o">=</span> <span class="s1">'auto'</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<ul class="simple">
|
|
<li><strong>$width</strong> is the desired width of the resulting image, in pixels.</li>
|
|
<li><strong>$height</strong> is the desired height of the resulting image, in pixels.</li>
|
|
<li><strong>$x</strong> is the number of pixels from the left side of the image to start cropping.</li>
|
|
<li><strong>$y</strong> is the number of pixels from the top of the image to start cropping.</li>
|
|
<li><strong>$maintainRatio</strong> will, if true, adjust the final dimensions as needed to maintain the image’s original aspect ratio.</li>
|
|
<li><strong>$masterDim</strong> specifies which dimension should be left untouched when $maintainRatio is true. Values can be: ‘width’, ‘height’, or ‘auto’.</li>
|
|
</ul>
|
|
<p>To take a 50x50 pixel square out of the center of an image, you would need to first calculate the appropriate x and y
|
|
offset values:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nv">$info</span> <span class="o">=</span> <span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">getFile</span><span class="p">()</span>
|
|
<span class="o">-></span><span class="na">getProperties</span><span class="p">(</span><span class="k">true</span><span class="p">);</span>
|
|
|
|
<span class="nv">$xOffset</span> <span class="o">=</span> <span class="p">(</span><span class="nv">$info</span><span class="p">[</span><span class="s1">'width'</span><span class="p">]</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="mi">25</span><span class="p">;</span>
|
|
<span class="nv">$yOffset</span> <span class="o">=</span> <span class="p">(</span><span class="nv">$info</span><span class="p">[</span><span class="s1">'height'</span><span class="p">]</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">-</span> <span class="mi">25</span><span class="p">;</span>
|
|
|
|
<span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">crop</span><span class="p">(</span><span class="mi">50</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="nv">$xOffset</span><span class="p">,</span> <span class="nv">$yOffset</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'path/to/new/image.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="fitting-images">
|
|
<h4>Fitting Images<a class="headerlink" href="#fitting-images" title="Permalink to this headline">¶</a></h4>
|
|
<p>The <code class="docutils literal"><span class="pre">fit()</span></code> method aims to help simplify cropping a portion of an image in a “smart” way, by doing the following steps:</p>
|
|
<ul class="simple">
|
|
<li>Determine the correct portion of the original image to crop in order to maintain the desired aspect ratio.</li>
|
|
<li>Crop the original image.</li>
|
|
<li>Resize to the final dimensions.</li>
|
|
</ul>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">fit</span><span class="p">(</span><span class="nx">int</span> <span class="nv">$width</span><span class="p">,</span> <span class="nx">int</span> <span class="nv">$height</span> <span class="o">=</span> <span class="k">null</span><span class="p">,</span> <span class="nx">string</span> <span class="nv">$position</span> <span class="o">=</span> <span class="s1">'center'</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<ul class="simple">
|
|
<li><strong>$width</strong> is the desired final width of the image.</li>
|
|
<li><strong>$height</strong> is the desired final height of the image.</li>
|
|
<li><strong>$position</strong> determines the portion of the image to crop out. Allowed positions: ‘top-left’, ‘top’, ‘top-right’, ‘left’, ‘center’, ‘right’, ‘bottom-left’, ‘bottom’, ‘bottom-right’.</li>
|
|
</ul>
|
|
<p>This provides a much simpler way to crop that will always maintain the aspect ratio:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">fit</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">150</span><span class="p">,</span> <span class="s1">'left'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'path/to/new/image.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="flattening-images">
|
|
<h4>Flattening Images<a class="headerlink" href="#flattening-images" title="Permalink to this headline">¶</a></h4>
|
|
<p>The <code class="docutils literal"><span class="pre">flatten()</span></code> method aims to add a background color behind transparent images (PNG) and convert RGBA pixels to RGB pixels</p>
|
|
<ul class="simple">
|
|
<li>Specify a background color when converting from transparent images to jpgs.</li>
|
|
</ul>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">flatten</span><span class="p">(</span><span class="nx">int</span> <span class="nv">$red</span> <span class="o">=</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">int</span> <span class="nv">$green</span> <span class="o">=</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">int</span> <span class="nv">$blue</span> <span class="o">=</span> <span class="mi">255</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<ul class="simple">
|
|
<li><strong>$red</strong> is the red value of the background.</li>
|
|
<li><strong>$green</strong> is the green value of the background.</li>
|
|
<li><strong>$blue</strong> is the blue value of the background.</li>
|
|
</ul>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.png'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">flatten</span><span class="p">()</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'path/to/new/image.jpg'</span><span class="p">);</span>
|
|
|
|
<span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.png'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">flatten</span><span class="p">(</span><span class="mi">25</span><span class="p">,</span><span class="mi">25</span><span class="p">,</span><span class="mi">112</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'path/to/new/image.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="flipping-images">
|
|
<h4>Flipping Images<a class="headerlink" href="#flipping-images" title="Permalink to this headline">¶</a></h4>
|
|
<p>Images can be flipped along either their horizontal or vertical axis:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">flip</span><span class="p">(</span><span class="nx">string</span> <span class="nv">$dir</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<ul class="simple">
|
|
<li><strong>$dir</strong> specifies the axis to flip along. Can be either ‘vertical’ or ‘horizontal’.</li>
|
|
</ul>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">flip</span><span class="p">(</span><span class="s1">'horizontal'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'path/to/new/image.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="resizing-images">
|
|
<h4>Resizing Images<a class="headerlink" href="#resizing-images" title="Permalink to this headline">¶</a></h4>
|
|
<p>Images can be resized to fit any dimension you require with the resize() method:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">resize</span><span class="p">(</span><span class="nx">int</span> <span class="nv">$width</span><span class="p">,</span> <span class="nx">int</span> <span class="nv">$height</span><span class="p">,</span> <span class="nx">bool</span> <span class="nv">$maintainRatio</span> <span class="o">=</span> <span class="k">false</span><span class="p">,</span> <span class="nx">string</span> <span class="nv">$masterDim</span> <span class="o">=</span> <span class="s1">'auto'</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<ul class="simple">
|
|
<li><strong>$width</strong> is the desired width of the new image in pixels</li>
|
|
<li><strong>$height</strong> is the desired height of the new image in pixels</li>
|
|
<li><strong>$maintainRatio</strong> determines whether the image is stretched to fit the new dimensions, or the original aspect ratio is maintained.</li>
|
|
<li><strong>$masterDim</strong> specifies which axis should have its dimension honored when maintaining ratio. Either ‘width’, ‘height’.</li>
|
|
</ul>
|
|
<p>When resizing images you can choose whether to maintain the ratio of the original image, or stretch/squash the new
|
|
image to fit the desired dimensions. If $maintainRatio is true, the dimension specified by $masterDim will stay the same,
|
|
while the other dimension will be altered to match the original image’s aspect ratio.</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">resize</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="k">true</span><span class="p">,</span> <span class="s1">'height'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'path/to/new/image.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="rotating-images">
|
|
<h4>Rotating Images<a class="headerlink" href="#rotating-images" title="Permalink to this headline">¶</a></h4>
|
|
<p>The rotate() method allows you to rotate an image in 90 degree increments:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">rotate</span><span class="p">(</span><span class="nx">float</span> <span class="nv">$angle</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<ul class="simple">
|
|
<li><strong>$angle</strong> is the number of degrees to rotate. One of ‘90’, ‘180’, ‘270’.</li>
|
|
</ul>
|
|
<div class="admonition note">
|
|
<p class="first admonition-title">Note</p>
|
|
<p class="last">While the $angle parameter accepts a float, it will convert it to an integer during the process.
|
|
If the value is any other than the three values listed above, it will throw a CodeIgniterImagesImageException.</p>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="adding-a-text-watermark">
|
|
<h4>Adding a Text Watermark<a class="headerlink" href="#adding-a-text-watermark" title="Permalink to this headline">¶</a></h4>
|
|
<p>You can overlay a text watermark onto the image very simply with the text() method. This is useful for placing copyright
|
|
notices, photogropher names, or simply marking the images as a preview so they won’t be used in other people’s final
|
|
products.</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">text</span><span class="p">(</span><span class="nx">string</span> <span class="nv">$text</span><span class="p">,</span> <span class="k">array</span> <span class="nv">$options</span> <span class="o">=</span> <span class="p">[])</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>The first parameter is the string of text that you wish to display. The second parameter is an array of options
|
|
that allow you to specify how the text should be displayed:</p>
|
|
<div class="highlight-ci"><div class="highlight"><pre><span></span><span class="nx">Services</span><span class="o">::</span><span class="na">image</span><span class="p">(</span><span class="s1">'imagick'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">withFile</span><span class="p">(</span><span class="s1">'/path/to/image/mypic.jpg'</span><span class="p">)</span>
|
|
<span class="o">-></span><span class="na">text</span><span class="p">(</span><span class="s1">'Copyright 2017 My Photo Co'</span><span class="p">,</span> <span class="p">[</span>
|
|
<span class="s1">'color'</span> <span class="o">=></span> <span class="s1">'#fff'</span><span class="p">,</span>
|
|
<span class="s1">'opacity'</span> <span class="o">=></span> <span class="mf">0.5</span><span class="p">,</span>
|
|
<span class="s1">'withShadow'</span> <span class="o">=></span> <span class="k">true</span><span class="p">,</span>
|
|
<span class="s1">'hAlign'</span> <span class="o">=></span> <span class="s1">'center'</span><span class="p">,</span>
|
|
<span class="s1">'vAlign'</span> <span class="o">=></span> <span class="s1">'bottom'</span><span class="p">,</span>
|
|
<span class="s1">'fontSize'</span> <span class="o">=></span> <span class="mi">20</span>
|
|
<span class="p">])</span>
|
|
<span class="o">-></span><span class="na">save</span><span class="p">(</span><span class="s1">'path/to/new/image.jpg'</span><span class="p">);</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>The possible options that are recognized are as follows:</p>
|
|
<ul class="simple">
|
|
<li>color Text Color (hex number), i.e. #ff0000</li>
|
|
<li>opacity A number between 0 and 1 that represents the opacity of the text.</li>
|
|
<li>withShadow Boolean value whether to display a shadow or not.</li>
|
|
<li>shadowColor Color of the shadow (hex number)</li>
|
|
<li>shadowOffset How many pixels to offset the shadow. Applies to both the vertical and horizontal values.</li>
|
|
<li>hAlign Horizontal alignment: left, center, right</li>
|
|
<li>vAlign Vertical alignment: top, middle, bottom</li>
|
|
<li>hOffset Additional offset on the x axis, in pixels</li>
|
|
<li>vOffset Additional offset on the y axis, in pixels</li>
|
|
<li>fontPath The full server path to the TTF font you wish to use. System font will be used if none is given.</li>
|
|
<li>fontSize The font size to use. When using the GD handler with the system font, valid values are between 1-5.</li>
|
|
</ul>
|
|
<div class="admonition note">
|
|
<p class="first admonition-title">Note</p>
|
|
<p class="last">The ImageMagick driver does not recognize full server path for fontPath. Instead, simply provide the
|
|
name of one of the installed system fonts that you wish to use, i.e. Calibri.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="articleComments">
|
|
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
|
|
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
|
|
|
|
<a href="pagination.html" class="btn btn-neutral float-right" title="Pagination" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
|
|
|
|
|
|
<a href="honeypot.html" class="btn btn-neutral" title="Honeypot Class" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a>
|
|
|
|
</div>
|
|
|
|
|
|
<hr/>
|
|
|
|
<div role="contentinfo">
|
|
<p>
|
|
© Copyright 2014-2019 British Columbia Institute of Technology.
|
|
Last updated on Feb 15, 2019.
|
|
|
|
</p>
|
|
</div>
|
|
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
|
|
|
|
</footer>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
var DOCUMENTATION_OPTIONS = {
|
|
URL_ROOT:'../',
|
|
VERSION:'4.0.0-alpha.5',
|
|
COLLAPSE_INDEX:false,
|
|
FILE_SUFFIX:'.html',
|
|
HAS_SOURCE: false,
|
|
SOURCELINK_SUFFIX: ''
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="../_static/jquery.js"></script>
|
|
<script type="text/javascript" src="../_static/underscore.js"></script>
|
|
<script type="text/javascript" src="../_static/doctools.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="../_static/js/theme.js"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
jQuery(function () {
|
|
SphinxRtdTheme.StickyNav.enable();
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |