Add watermark using Jquery File Upload

问题

I'm using jquery file upload and I can't seem to figure out a way to add a watermark after the image has been uploaded.

http://blueimp.github.io/jQuery-File-Upload/

anyone have any ideas?

回答1:

I know this is an old question, but I had to find a solution and here is my example. So You need to modify UploadHandler.php, I did it in function gd_create_scaled_image

add:

$stamp = imagecreatefrompng('../../img/stamp.png'); //path to your watermark file
$im = $src_func($file_path);
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);

and:

$success = imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp)) && $write_func($im, $file_path, $image_quality)&& imagecopyresampled($new_img, $src_img, $dst_x, $dst_y, 0, 0, $new_width, $new_height, $img_width, $img_height) && $write_func($new_img, $new_file_path, $image_quality);
$this->gd_set_image_object($file_path, $new_img);
return $success;

the whole function looks like this:

protected function gd_create_scaled_image($file_name, $version, $options) {
    if (!function_exists('imagecreatetruecolor')) {
        error_log('Function not found: imagecreatetruecolor');
        return false;
    }
    list($file_path, $new_file_path) =
        $this->get_scaled_image_file_paths($file_name, $version);
    $type = strtolower(substr(strrchr($file_name, '.'), 1));
    switch ($type) {
        case 'jpg':
        case 'jpeg':
            $src_func = 'imagecreatefromjpeg';
            $write_func = 'imagejpeg';
            $image_quality = isset($options['jpeg_quality']) ?
                $options['jpeg_quality'] : 75;
            break;
        case 'gif':
            $src_func = 'imagecreatefromgif';
            $write_func = 'imagegif';
            $image_quality = null;
            break;
        case 'png':
            $src_func = 'imagecreatefrompng';
            $write_func = 'imagepng';
            $image_quality = isset($options['png_quality']) ?
                $options['png_quality'] : 9;
            break;
        default:
            return false;
    }

    //watermark
    $stamp = imagecreatefrompng('../../img/stamp.png'); //path to your watermark file
    $im = $src_func($file_path);
    $marge_right = 10;
    $marge_bottom = 10;
    $sx = imagesx($stamp);
    $sy = imagesy($stamp);

    $src_img = $this->gd_get_image_object(
        $file_path,
        $src_func,
        !empty($options['no_cache'])
    );
    $image_oriented = false;
    if (!empty($options['auto_orient']) && $this->gd_orient_image(
            $file_path,
            $src_img
        )) {
        $image_oriented = true;
        $src_img = $this->gd_get_image_object(
            $file_path,
            $src_func
        );
    }
    $max_width = $img_width = imagesx($src_img);
    $max_height = $img_height = imagesy($src_img);
    if (!empty($options['max_width'])) {
        $max_width = $options['max_width'];
    }
    if (!empty($options['max_height'])) {
        $max_height = $options['max_height'];
    }
    $scale = min(
        $max_width / $img_width,
        $max_height / $img_height
    );
    if ($scale >= 1) {
        if ($image_oriented) {
            return $write_func($src_img, $new_file_path, $image_quality);
        }
        if ($file_path !== $new_file_path) {
            return copy($file_path, $new_file_path);
        }
        return true;
    }
    if (empty($options['crop'])) {
        $new_width = $img_width * $scale;
        $new_height = $img_height * $scale;
        $dst_x = 0;
        $dst_y = 0;
        $new_img = imagecreatetruecolor($new_width, $new_height);
    } else {
        if (($img_width / $img_height) >= ($max_width / $max_height)) {
            $new_width = $img_width / ($img_height / $max_height);
            $new_height = $max_height;
        } else {
            $new_width = $max_width;
            $new_height = $img_height / ($img_width / $max_width);
        }
        $dst_x = 0 - ($new_width - $max_width) / 2;
        $dst_y = 0 - ($new_height - $max_height) / 2;
        $new_img = imagecreatetruecolor($max_width, $max_height);
    }
    // Handle transparency in GIF and PNG images:
    switch ($type) {
        case 'gif':
        case 'png':
            imagecolortransparent($new_img, imagecolorallocate($new_img, 0, 0, 0));
        case 'png':
            imagealphablending($new_img, false);
            imagesavealpha($new_img, true);
            break;
    }
    //watermark
    $success = imagecopy(
        $im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp)
    ) && $write_func($im, $file_path, $image_quality)&& imagecopyresampled(
        $new_img, $src_img, $dst_x, $dst_y, 0, 0, $new_width, $new_height, $img_width, $img_height
    ) && $write_func($new_img, $new_file_path, $image_quality);
    $this->gd_set_image_object($file_path, $new_img);
    return $success;
}

I hope this helps someone.

EDIT:

Also you have to force to use the GD library by changing in same file:

'image_library' => 0

回答2:

You need to add some code that does that in the server/php/UploadHandler.php file

https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php

回答3:

I found this great tutorial to add watermark on uploaded image using ajax please follow along this link Ajax file upload and watermark.

You can make a separate function using the function code from the above link in the UploadHandler Class in UploadHandler.php file and use it as you desire. You can call this function immediately after the file gets uploaded.

来源：https://stackoverflow.com/questions/26393003/add-watermark-using-jquery-file-upload