In my Laravel site, I have the following code snippet inside a controller:
serveAngledImage($session,$imgId,$angle) {
[...]
$maskExists =\Storage::disk('s3')->exists($usrDirectory.$maskFile);
$maskUrl = \Storage::disk('s3')->temporaryUrl(
$usrDirectory . $maskFile, now()->addMinutes(12)
);
if ($maskExists) {
$img = Image::make($maskUrl);
$originalWidth = $img->width();
$originalHeight = $img->height();
$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->encode('data-url');
}
else {
$img = null;
}
return $img->encoded;
}
This code is called by the following route:
Route::get('/angleImage/{session_id}/{media_id}/{angle}', 'mediacenter@serveAngledImage');
When visiting this route using a browser, the expected result is an encoded image. However, when adding this as the source of a mask in CSS (via JavaScript), the image fails to load. The URL appears red in the web development tools with an alert stating "unable to load image".
var Mask = '-webkit-mask-image: url(/angleImage/'+this.sh_session+'/'+this.image.id+'/'+back.angle+'); -webkit-mask-repeat: no-repeat;position:absolute;top:0;left:0;display:block;';
this.style = Mask;
If copying and pasting the link from the CSS into a new browser tab, the encoded image displays correctly. However, when viewing the data from the pasted link, it appears as something like: data:image/png;base64,iVBORw0KGgo....