如何在图像上添加图像水印?

时间:2014-12-16 19:40:40

标签: javascript jquery html css

我使用以下代码在灯箱中打开图像,但是当打开图像时我想在右下角有一个水印图像。所以这是我正在使用的代码。

HTML

<div><a class="fancybox" href="pic1.jpg" data-fancybox-group="gallery" title=""><img src="pic1.jpg" alt="1" /></a></div>

CSS

        .list_carousel {
            width: 100%;

        }
        .list_carousel ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: block;
            width: 100%;
            margin-top: 5.8%;
            margin-bottom: -90%;
        }
        .list_carousel li {
            text-align: center;
            width: 100%;
            padding: 0;
            display: block;
            float: left;
        }
        .list_carousel.responsive {
            width: auto;
            margin-left: 0;
        }

JS

$(function() {
$('#foo4').carouFredSel({
    responsive: true,
        width: '100%',
        height: '100%',
        scroll: 1,
        items: {
            height: '30%',
                visible: {
                        min: 0,
                        max: 1
                    }
                }
            });

        });

1 个答案:

答案 0 :(得分:0)

在图像上做水印最佳方法是在上传和添加水印时

她的方法将您的水印文件重命名为watermark.png

<?php

if(isset($_FILES['image_file']))
{
    $max_size = 800; //max image size in Pixels
    $destination_folder = 'images/';
    $watermark_png_file = 'watermark.png'; //watermark png file

    $image_name = $_FILES['image_file']['name']; //file name
    $image_size = $_FILES['image_file']['size']; //file size
    $image_temp = $_FILES['image_file']['tmp_name']; //file temp
    $image_type = $_FILES['image_file']['type']; //file type

    switch(strtolower($image_type)){ //determine uploaded image type 
            //Create new image from file
            case 'image/png': 
                $image_resource =  imagecreatefrompng($image_temp);
                break;
            case 'image/gif':
                $image_resource =  imagecreatefromgif($image_temp);
                break;          
            case 'image/jpeg': case 'image/pjpeg':
                $image_resource = imagecreatefromjpeg($image_temp);
                break;
            default:
                $image_resource = false;
        }

    if($image_resource){
        //Copy and resize part of an image with resampling
        list($img_width, $img_height) = getimagesize($image_temp);

        //Construct a proportional size of new image
        $image_scale        = min($max_size / $img_width, $max_size / $img_height); 
        $new_image_width    = ceil($image_scale * $img_width);
        $new_image_height   = ceil($image_scale * $img_height);
        $new_canvas         = imagecreatetruecolor($new_image_width , $new_image_height);

        if(imagecopyresampled($new_canvas, $image_resource , 0, 0, 0, 0, $new_image_width, $new_image_height, $img_width, $img_height))
        {

            if(!is_dir($destination_folder)){ 
                mkdir($destination_folder);//create dir if it doesn't exist
            }

            //center watermark
            $watermark_left = ($new_image_width/2)-(300/2); //watermark left
            $watermark_bottom = ($new_image_height/2)-(100/2); //watermark bottom

            $watermark = imagecreatefrompng($watermark_png_file); //watermark image
            imagecopy($new_canvas, $watermark, $watermark_left, $watermark_bottom, 0, 0, 300, 100); //merge image

            //output image direcly on the browser.
            header('Content-Type: image/jpeg');
            imagejpeg($new_canvas, NULL , 90);
            imagejpeg($new_canvas, $destination_folder.'/'.$image_name , 90);
            //free up memory
            imagedestroy($new_canvas); 
            imagedestroy($image_resource);
            die();
        }
    }
}

?>

创建水印的最佳方法