在缩略图底部显示文件名

Question

我在 Laravel 中使用 dropzone 上传图片。

有没有办法在缩略图底部显示图片名称？

我知道将鼠标悬停在缩略图上时会显示图像名称，但我希望在缩略图底部显示文件名而不悬停在缩略图上。

代码如下。

我的 dropzone js 在我的上传页面中。

Dropzone.options.imageUpload = {
  paramName: "image", // The name that will be used to transfer the file
  maxFilesize: 30, // MB
  uploadMultiple: true,
  clickable: true,
  maxThumbnailFilesize: 30,
  parallelUploads: 1,
  maxFiles: 10,
  dictMaxFilesExceeded: "This image is exceeded the limit upload",
  init: function() {
    this.on("queuecomplete", function(file) { $("#buttons").show(); });
  },
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  } 
};

我的上传控制器

 $User = Auth::user()->id;
    $category = Category::active()->first();
    $sizeHeight = Size::orderBy('height', 'ASC')->where('status', 0)->first();
    $sizeWidth = Size::orderBy('width', 'ASC')->where('status', 0)->first();
    $files = $request->file('image');

    if( !empty( $files ) ):
        $urls = array();
        foreach( $files as $val => $file ):
            $now = Carbon::now();
            $time = str_replace(':', '-', $now);
            //$number = $val + 1;

            echo $sizeHeight;
            echo $sizeWidth;
            $filename = $file->getClientOriginalName();
            //get image size
            $filepath = $file->getRealPath();
            list($width, $height) = getimagesize($filepath);
            //if wrong orientation then

            if($width >= $sizeWidth->width || $height >= $sizeHeight->height)
            {
                // Ryan 22 October 2016 (Saturday) move save photo to top 
                $photo = new photo;
                $photo->user_id = $User;
                $photo->photoName = $time . $filename;
                $photo->category_id = $category->id;
                $photo->subcategory_id = "1";
                $photo->name = null;
                $photo->keyword = null;
                $photo->status = "2";
                $photo->save();

             }
    endif;

这是我悬停缩略图时的当前结果

我希望它是这样的，而不是悬停。

请帮忙。

Answer 1

如果要给图片添加文字，可以使用 Laravel 的 Image Intervention 包。 text() 方法将帮助您。

在可选的 x,y 基点位置向当前图像写入文本字符串。您可以通过回调定义更多细节，如字体大小、字体文件和对齐方式作为第四个参数。

如果您只是想在图像上显示一些文本而不编辑文件，您可以use CSS。