Added Watermark preview, Job Download

app/Http/Controllers/PresetController.php

@@ -6,9 +6,77 @@
 use App\Http\Requests\PresetRequest;
 use App\Preset;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+use Intervention\Image\Facades\Image;
 
 class PresetController extends Controller
 {
+ public function previewWatermark(Request $request)
+ {
+ $validator = Validator::make($request->all(), [
+ 'width' => 'required',
+ 'height' => 'required',
+ 'company' => 'required|exists:companies,id',
+ 'unit' => 'nullable',
+ 'position' => 'required',
+ 'xAxis' => Rule::requiredIf(function () use ($request) {
+ return in_array($request->get('unit'), [
+ 'px', 'percent'
+ ]);
+ }),
+ 'yAxis' => Rule::requiredIf(function () use ($request) {
+ return in_array($request->get('unit'), [
+ 'px', 'percent'
+ ]);
+ }),
+ ]);
+
+ if ($validator->fails()) {
+ return response()->json([
+ 'status' => false,
+ 'error' => $validator->errors()
+ ]);
+ }
+
+ $watermarkWidth = config('imager.watermark.width', 100);
+ $watermarkOpacity = config('imager.watermark.opacity', 100);
+
+ $image = Image::canvas(request('width'), request('height'), '#cccccc');
+
+ $company = Company::whereId(request('company'))->first();
+
+ $watermark = Image::make($company->getCompanyLogo())
+ ->resize($watermarkWidth, null, function ($constraint) {
+ $constraint->aspectRatio();
+ })->opacity($watermarkOpacity);
+
+ if (request('unit') === 'auto') {
+ $image->insert(
+ $watermark,
+ request('position')
+ );
+ } else if (request('unit') === 'percent') {
+ $xAxis = round((((int)request('width') * (int)request('xAxis')) / 100));
+ $yAxis = round((((int)request('height') * (int)request('yAxis')) / 100));
+
+ $image->insert(
+ $watermark,
+ request('position'),
+ $xAxis,
+ $yAxis
+ );
+ } else {
+ $image->insert(
+ $watermark,
+ request('position'),
+ request('xAxis'),
+ request('yAxis')
+ );
+ }
+
+ return $image->response();
+ }
 
  public function index()
  {

app/ImageModifier.php

@@ -0,0 +1,101 @@
+<?php
+
+namespace App;
+
+use App\Job;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Storage;
+use Intervention\Image\Facades\Image;
+
+class ImageModifier
+{
+ /**
+ * @var Job
+ */
+ public $job;
+
+ /**
+ * Files to process
+ *
+ * @var array|Collection
+ */
+ public $files = [];
+
+ /**
+ * File processing preset
+ *
+ * @var Preset
+ */
+ public $preset;
+
+ /**
+ * Preset options
+ *
+ * @var mixed
+ */
+ public $options;
+
+ public function __construct(Job $job)
+ {
+ $this->job = $job;
+ $this->files = $job->files;
+ $this->preset = $job->preset;
+ $this->options = json_decode($this->preset->options);
+ }
+
+ public function process()
+ {
+ $job_directory = $this->job->getJobDirectory();
+ $output_directory = $this->job->getOutputDirectory();
+
+ if (empty($this->options->resolutions)) {
+ return [
+ 'status' => false,
+ 'message' => 'No resolutions specified for output.'
+ ];
+ }
+
+ # If the output directory exists, delete it.
+ if (Storage::exists($output_directory)) {
+ Storage::deleteDirectory($output_directory);
+ }
+
+ Storage::makeDirectory($output_directory);
+
+ # make directories for different resolutions
+ $resolutionDirectories = [];
+ foreach ($this->options->resolutions as $resolution) {
+ if (!empty($resolution->width) && !empty($resolution->height)) {
+ $resolutionDirectory = (int)$resolution->width . 'x' . (int)$resolution->height;
+ $resOutputDirectory = $output_directory . DIRECTORY_SEPARATOR . $resolutionDirectory;
+ if (Storage::makeDirectory($resOutputDirectory)) {
+ $resolutionDirectories[] = $resOutputDirectory;
+ }
+ }
+ }
+
+ // process each image for different resolutions
+ $this->files->each(function ($file, $index) use ($output_directory) {
+ foreach ($this->options->resolutions as $resolution) {
+ if (!empty($resolution->width) && !empty($resolution->height)) {
+ $resolutionDirectory = (int)$resolution->width . 'x' . (int)$resolution->height;
+ $resOutputDirectory = $output_directory . DIRECTORY_SEPARATOR . $resolutionDirectory;
+
+ echo storage_path($file->full_path);
+ $image = Image::make(storage_path($file->full_path))
+ ->resize($resolution->width, $resolution->height);
+
+ // later add watermark.
+ $filename = $file->name;
+ if ($this->options->filename_prefix) {
+ $filename = sprintf("%s%04d", $this->options->filename_prefix, $index);
+ }
+
+ $image->save(storage_path($resOutputDirectory . DIRECTORY_SEPARATOR . $filename));
+ }
+ }
+ });
+ // store the images in their respective folders
+ }
+
+}

app/Imager/ImageGenerator.php

@@ -179,8 +179,9 @@ protected function applyWatermark($image, Preset $preset)
  $company = $this->getCompanyForSection($preset);
 
  $watermark = Image::make($company->getCompanyLogo())
- ->resize($watermarkWidth, $watermarkHeight)
- ->opacity($watermarkOpacity);
+ ->resize($watermarkWidth, null, function ($constraint) {
+ $constraint->aspectRatio();
+ })->opacity($watermarkOpacity);
 
  if ($preset->{$this->section . '_wm_unit'} === 'auto') {
  $image->insert(

config/imager.php

@@ -49,5 +49,5 @@
  *
  * This will take additional milliseconds of processing.
  */
- 'track_section_progress' => false
+ 'track_section_progress' => true
 ];

resources/js/components/GenericForm.vue

@@ -73,7 +73,7 @@
  <label>Company Logo</label>
  <v-select
  v-model="form.company"
- @input="(val) => $emit('company-id', val)"
+ @input="companyHandler"
  :options="pick_list.companies"
  :disabled="disabled"
  :get-option-label="company => company.name"
@@ -89,7 +89,7 @@
  <label>Position</label>
  <v-select
  v-model="form.position"
- @input="(val) => $emit('position', val)"
+ @input="positionHandler"
  :options="pick_list.positions"
  :disabled="disabled"
  placeholder="Select a position"
@@ -101,22 +101,23 @@
  <label>unit</label>
  <v-select
  v-model="form.unit"
- @input="(val) => $emit('unit', val)"
+ @input="unitHanlder"
  :options="pick_list.units"
  :disabled="disabled"
  placeholder="Select a unit"
  />
  <span v-if="errors[id + '_wm_unit']" class="text-danger">{{ errors[id + '_wm_unit'].join(', ') }}</span>
  </div>
  </div>
- <watermark-preview v-show="form.position" :position="form.position"/>
+ <div ref="watermarkPreview" class="my-4 text-center"></div>
+<!-- <watermark-preview v-show="form.position" :position="form.position"/>-->
  <br/>
  <div class="form-row">
  <div class="col">
  <label>X Axis</label>
  <input
  v-model="form.xAxis"
- @change="$emit('posx', $event.target.value)"
+ @change="xAxisHandler"
  :disabled="disabled || form.unit === 'auto'"
  name="posx"
  type="text"
@@ -129,7 +130,7 @@
  <label>Y Axis</label>
  <input
  v-model="form.yAxis"
- @change="$emit('posy', $event.target.value)"
+ @change="yAxisHandler"
  :disabled="disabled || form.unit === 'auto'"
  name="posy"
  type="text"
@@ -145,6 +146,9 @@
 
 <script>
  import WatermarkPreview from "./WatermarkPreview";
+ import jQuery from 'jquery';
+
+ const $ = jQuery;
 
  export default {
  name: 'GenericForm',
@@ -263,13 +267,66 @@
  unit: '',
  xAxis: '',
  yAxis: ''
- }
+ },
+ loading: false,
  }
  },
 
  methods: {
- showPlaceholderImage() {
+ companyHandler(val) {
+ this.$emit('company', val);
+ this.generatePreviewImage();
+ },
+ positionHandler(val) {
+ this.$emit('position', val);
+ this.generatePreviewImage();
+ },
+ unitHanlder(val) {
+ this.$emit('unit', val);
+ this.generatePreviewImage();
+ },
+ xAxisHandler(event) {
+ this.$emit('posx', event.target.value);
+ this.generatePreviewImage();
+ },
+ yAxisHandler(event) {
+ this.$emit('posy', event.target.value);
+ this.generatePreviewImage();
+ },
+ generatePreviewImage() {
+ if (
+ this.form.width == '' &&
+ this.form.height == '' &&
+ this.form.company == '' &&
+ this.form.position == '' &&
+ this.form.unit == ''
+ ) {
+ $(this.$refs.watermarkPreview).html('');
+ return;
+ }
+
+ if (
+ (this.form.unit === 'px' || this.form.unit === 'percent') &&
+ (this.form.xAxis === null || this.form.yAxis === null)
+ ) {
+ $(this.$refs.watermarkPreview).html('<small>Provide axis</small>');
+ return;
+ }
 
+ axios.get('/presets/preview', {
+ params: {
+ ...this.form
+ },
+ responseType: 'arraybuffer'
+ }).then((res) => {
+ let imageString = new Buffer(res.data, 'binary').toString('base64');
+ let img = document.createElement("img");
+ img.style = 'max-width: 100%;height: auto;';
+ img.src = 'data:image/png;base64, ' + imageString;
+ $(this.$refs.watermarkPreview).html(img);
+ }).catch((error) => {
+ console.log(error);
+ });
  }
  }
  }

routes/web.php

@@ -11,14 +11,12 @@
 |
 */
 
+use Intervention\Image\Facades\Image;
+
 Route::get('/', function () {
  return redirect(route('home'));
 });
 
-Route::get('/test', function () {
- phpinfo();
-});
-
 Auth::routes();
 
 Route::get('/home', 'HomeController@index')->name('home');
@@ -43,6 +41,7 @@
  Route::get('/', 'PresetController@index')->name('presets');
 
  Route::get('create', 'PresetController@create')->name('create_preset');
+ Route::get('preview', 'PresetController@previewWatermark')->name('preview_watermark');
  Route::post('add', 'PresetController@store')->name('add_preset');
 
  Route::get('edit/{preset}', 'PresetController@edit')->name('edit_preset');