使用 Dropzone.js 和 Laravel 5.5 为多张图片添加水印

Question

我有一个表单，用户可以使用 Dropzone.js 上传多张图片，然后我将这些图片存储在数据库和 public/images 文件夹中。

但是我需要在将所有这些图像保存到public/images目录之前为所有这些图像添加水印，因为这些图像将在前端显示为"preview"图像。

我找到了有关如何使用干预图像添加水印的文档 here。

但我只是想不出如何在我当前的设置中添加它。

这是我的表格和脚本：

 <div id="file-preview_images" class="dropzone"></div>

 <script>
    let dropPreview = new Dropzone('#file-preview_images', {
        url: '{{ route('upload.preview.store', $file) }}',
        headers: {
            'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
        }
    });

    dropPreview.on('success', function(file, response) {
        file.id = response.id;
    });
</script>

$file 变量是当用户点击创建一个新文件时，它会在保存之前创建一个具有唯一标识符的新文件。一个文件可以有多个上传。

这是我的存储方法：

public function store(File $file, Request $request) {

        // Make sure the user owns the file before we store it in database.
        $this->authorize('touch', $file);

        // Get the file(s)
        $uploadedFile = $request->file('file');

        $upload = $this->storeUpload($file, $uploadedFile);

        $request->file( 'file' )->move(
            base_path() . '/public/images/previews/', $upload->filename
        );

        return response()->json([
            'id' => $upload->id
        ]);
}



protected function storeUpload(File $file, UploadedFile $uploadedFile) {

        // Make a new Upload model
        $upload = new Upload;

        // Fill the fields in the uploads table
        $upload->fill([
            'filename' => $uploadedFile->getClientOriginalName(),
            'size' => $uploadedFile->getSize(),
            'preview' => 1
        ]);

        // Associate this upload with a file.
        $upload->file()->associate($file);

        // Associate this upload with a user
        $upload->user()->associate(auth()->user());

        // Save the file
        $upload->save();

        return $upload;
}

所有这些都按预期工作，我只需要为这些图像中的每一个添加水印，我遇到了问题。

I already saved a watermark image in public/images/shutterstock.png

Answer 1

我明白了。这是我必须做的：

public function store(File $file, Request $request) {

        // Make sure the user owns the file before we store it in database.
        $this->authorize('touch', $file);

        // Get the file(s)
        $uploadedFile = $request->file('file');

        $upload = $this->storeUpload($file, $uploadedFile);

        // Get the image, and make it using Image Intervention
        $img = Image::make($request->file('file'));

        // Insert the image above with the watermarked image, and center the watermark
        $img->insert('images/home/shutterstock.png', 'center');

        // Save the image in the 'public/images/previews' directory
        $img->save(base_path() . '/public/images/gallery/pre/'.$upload->filename);      

        return response()->json([
            'id' => $upload->id
        ]);
    }

并且在 "storeUpload" 方法上，也更改了 'filename'：

$upload->fill([
    'filename' => $file->identifier.'-'.uniqid(10).$uploadedFile->getClientOriginalName(),
    'size' => $uploadedFile->getSize(),
    'preview' => 1
]);

使用 Dropzone.js 和 Laravel 5.5 为多张图片添加水印

Add watermarks to multiple images using Dropzone.js and Laravel 5.5

php

watermark

dropzone.js

intervention

laravel-5.5