simplesoftwareio/simple-qrcode Image manipulation

Question

I would like to know how to change image position using canvas in php

I'm trying to display the content inside the picture to bottom right

    for($i=0;$i<$request->tables_count;$i++)
{
    $milliseconds = round(microtime(true) * 1000);
    $qrCodeName = 'storage/uploads/restaurants/' . $milliseconds . "-" . Carbon::now()->toDateString() . '.png';

    $newTable=Table::create([
        'qr_code' => $qrCodeName,
        'num_table' => $i+1,
        'status' => 1,
        'restaurant_id' =>$restaurant->id,
    ]);
    $numTableImage = Image::canvas(100, 350)->fill('rgba(0, 0, 0, 0.5)');
    $numTableImage->text($newTable->num_table, 100, 200, function($font) {
        $font->file(public_path('templates/backOffice/restaurant/fonts/OpenSans-Bold.ttf'));
        $font->size(100);
        $font->color('#fdf6e3');
        $font->align('center');
    });

    $numTableImage->save('storage/uploads/restaurants/table'.$newTable->num_table.'.png');

    $qrCode = str_random(10) . "-" . $newTable->id;
    $data = $numTableImage->encode();
    QrCode::format('png')->mergeString($data)->size(450)->generate($qrCode, $qrCodeName);

}

Adam · Answer 1 · 2018-12-05T16:40:00.160

If I'm understanding what you are doing correctly... why not add the canvas element, inside a div, and then add a span after the canvas?

<style>
div {
  position:relative;
}
span {
  position: absolute;
  bottom:0;
  right:0;
}
</style>

<div>
   <canvas></canvas>
   <span>1</span>
</div>

This way, you can easily position the number image / whatever it is in the bottom right using CSS positioning.

The answer here: Position Relative vs Absolute? is useful for understanding CSS positioning.

Would this solution work for you? Or do you have constraints that mean it won't?

Or if they are separate elements created in the canvas, do the same, but set the element in the canvas as per the span.

simplesoftwareio/simple-qrcode Image manipulation

1 Answers1