### Install Watermark via Bower

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

This command demonstrates how to install the jQuery Watermark plugin using the Bower package manager. Bower is a popular front-end package manager for the web.

```bash
bower install watermark
```

--------------------------------

### Install Watermark using Bower

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Command to install the watermark jQuery plugin using the Bower package manager. Bower is a front-end package manager for the web.

```bash
bower install watermark
```

--------------------------------

### Install Watermark using npm

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Command to install the watermark jQuery plugin using the npm package manager. npm is the default package manager for the JavaScript programming language.

```bash
npm install watermark
```

--------------------------------

### Install Watermark via npm

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

This command shows how to install the jQuery Watermark plugin using the npm (Node Package Manager). npm is the default package manager for the JavaScript programming language.

```bash
npm install watermark
```

--------------------------------

### Use Text as Watermark

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Applies a text-based watermark to images, similar to the style seen on 9gag. This example sets the text content, width, gravity (position), opacity, and margin for the text watermark.

```javascript
$(function() {
  $('.img_awesome').watermark({
    text: 'GOOGLE.COM',
    textWidth: 100,
    gravity: 'w',
    opacity: 1,
    margin: 12
  });
});
```

--------------------------------

### Initialize Watermark Plugin with Options

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

JavaScript code snippet showing the basic usage of the jQuery Watermark plugin. It initializes the plugin on a specified selector with optional configuration settings.

```javascript
$(function() {
  $(SELECTOR).watermark(OPTIONS);
});
```

--------------------------------

### Clone Watermark Repository using Git

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Instructions to clone the watermark project repository from GitHub using the Git command-line tool. This is a standard method for obtaining project source code.

```bash
git clone https://github.com/lelinhtinh/watermark.git
```

--------------------------------

### Clone Watermark Repository via Git

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

This command clones the Watermark project repository from GitHub using Git. Git is a distributed version control system used for tracking changes in source code during software development.

```bash
git clone https://github.com/lelinhtinh/watermark.git
```

--------------------------------

### Basic Image Watermarking

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

Applies a default watermark to images with the class 'img_awesome'. The watermark image 'watermark.png' should be in the root directory.

```html
<img class="img_awesome" src="img/1.jpg" alt="" />
<img class="img_awesome" src="img/2.jpg" alt="" />
<img class="img_awesome" src="img/3.jpg" alt="" />
```

```javascript
$(function() {
  $('.img_awesome').watermark();
});
```

--------------------------------

### Process Image URL with Watermark and Callback

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Creates an image element from a URL and applies a watermark. The `done` callback function is used to log the resulting image URL after the watermark is applied. This is useful for handling the processed image data.

```javascript
$(function() {
    $('<img>', {
        src: 'http://i.imgur.com/AAPx3rB.jpg'
    }).watermark({
        done: function (imgURL) {
            console.log(imgURL);
        }
    });
});
```

--------------------------------

### Apply Watermark to Elements

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

This JavaScript code snippet shows how to initialize the jQuery Watermark plugin on selected elements. It uses a jQuery selector to target the desired elements and applies the watermark functionality with optional configurations.

```javascript
$(function() {
  $(SELECTOR).watermark(OPTIONS);
});
```

--------------------------------

### Apply Watermark to Images

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Applies a default watermark to all elements with the class 'img_awesome'. Requires a 'watermark.png' file in the root directory. The watermark can be customized using various options.

```javascript
$(function() {
  $('.img_awesome').watermark();
});
```

--------------------------------

### Basic HTML Structure for Watermarking

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Provides the basic HTML structure with image elements that can be targeted by the watermark jQuery plugin. The class 'img_awesome' is used to select these images for watermarking.

```html
<img class="img_awesome" src="img/1.jpg" alt="" />
<img class="img_awesome" src="img/2.jpg" alt="" />
<img class="img_awesome" src="img/3.jpg" alt="" />
```

--------------------------------

### Apply Watermark to Multiple Images with jQuery

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

This JavaScript code snippet shows how to process an array of image URLs, apply a watermark to each, and collect the results. It utilizes jQuery and its Deferred object for asynchronous handling, logging the final array of watermarked image URLs to the console.

```javascript
$(function() {
    var inputImages = ['http://i.imgur.com/AAPx3rB.jpg', 'http://i.imgur.com/39dfdPw.jpg', 'http://i.imgur.com/3OfclQY.jpg'];

    var outputImages = [];

    var defer = $.Deferred();
    $.when(defer).done(function () {
        console.log(outputImages);
    });

    $.each(inputImages, function (i, v) {
        $('<img>', {
            src: v
        }).watermark({
            done: function (imgURL) {
                outputImages[i] = imgURL;
                if (i + 1 === inputImages.length) {
                    defer.resolve();
                }
            }
        });
    });
});
```

--------------------------------

### Process Multiple Image URLs

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

Processes multiple images from an array of URLs asynchronously and logs the resulting watermarked image URLs once all are processed.

```javascript
$(function() {
    var inputImages = ['http://i.imgur.com/AAPx3rB.jpg', 'http://i.imgur.com/39dfdPw.jpg', 'http://i.imgur.com/3OfclQY.jpg'];

    var outputImages = [];

    var defer = $.Deferred();
    $.when(defer).done(function () {
        console.log(outputImages);
    });

    $.each(inputImages, function (i, v) {
        $('<img>', {
            src: v
        }).watermark({
            done: function (imgURL) {
                outputImages[i] = imgURL;
                if (i + 1 === inputImages.length) {
                    defer.resolve();
                }
            }
        });
    });
});
```

--------------------------------

### Apache CORS Headers Configuration

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Configuration for Apache to set CORS headers, allowing access to images from different domains. This is necessary when images are restricted by server-side CORS policies.

```apache
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"
```

--------------------------------

### Custom Watermark Image Path

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Applies a watermark using a specified image URL instead of the default 'watermark.png'. This allows for dynamic watermarking from external sources.

```javascript
$(function() {
  $('.img_awesome').watermark({
    path: 'http://i.imgur.com/LcpZHu5.png'
  });
});
```

--------------------------------

### Process Single Image URL

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

Processes a single image from a URL and returns the watermarked image URL via a callback function.

```javascript
$(function() {
    $('<img>', {
        src: 'http://i.imgur.com/AAPx3rB.jpg'
    }).watermark({
        done: function (imgURL) {
            console.log(imgURL);
        }
    });
});
```

--------------------------------

### Include jQuery and Watermark Plugin

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

This HTML snippet demonstrates how to include the jQuery library (version 1.5 or higher) and the jQuery Watermark plugin script in an HTML document. These scripts are essential for the plugin to function correctly.

```html
<!-- jQuery 1.5+ -->
<script src="jquery.js" type="text/javascript"></script>
<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.js" type="text/javascript"></script>
```

--------------------------------

### Set Output Image Width

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

Limits the maximum width of the output watermarked image. It's recommended to use either 'outputWidth' or 'outputHeight' to maintain aspect ratio.

```javascript
$(function() {
  $('.img_awesome').watermark({
    outputWidth: 500
  });
});
```

--------------------------------

### Apache CORS Headers Configuration

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

This configuration snippet for Apache is used to set Cross-Origin Resource Sharing (CORS) headers. It allows resources from any origin to access the server's content and specifies the allowed headers for requests, which is necessary for the watermark plugin when dealing with images hosted on different domains.

```apache
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"
```

--------------------------------

### Include jQuery and Watermark Plugin in HTML

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

HTML snippet demonstrating how to include the jQuery library (version 1.5 or above) and the jQuery Watermark plugin script in an HTML document. These scripts should be placed at the end of the document for optimal performance.

```html
<!-- jQuery 1.5+ -->
<script src="jquery.js" type="text/javascript"></script>
<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.js" type="text/javascript"></script>
```

--------------------------------

### Text Watermark Styling

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

Applies a text watermark with customizable properties like text content, width, gravity (position), opacity, and margin.

```javascript
$(function() {
  $('.img_awesome').watermark({
    text: 'GOOGLE.COM',
    textWidth: 100,
    gravity: 'w',
    opacity: 1,
    margin: 12
  });
});
```

--------------------------------

### Custom Watermark Path

Source: https://github.com/lelinhtinh/watermark/blob/master/READMEvi.md

Specifies a custom path for the watermark image, which can be a URL or a base64 encoded string.

```javascript
$(function() {
  $('.img_awesome').watermark({
    path: 'http://i.imgur.com/LcpZHu5.png'
  });
});
```

--------------------------------

### Limit Watermark Output Width

Source: https://github.com/lelinhtinh/watermark/blob/master/README.md

Configures the watermark plugin to limit the maximum width of the output image to 500 pixels. It's recommended to use either `outputWidth` or `outputHeight` to maintain aspect ratio.

```javascript
$(function() {
  $('.img_awesome').watermark({
    outputWidth: 500
  });
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.