Скос и тиснение для автоматически сгенерированного изображения карты

#php #css #image #image-processing #html5-canvas

#php #css #изображение #обработка изображений #html5-холст

Вопрос:

я работал над автоматически сгенерированной картой для системы участников. карта, созданная системой изображений PHPGD. это код :

 <?php
include_once('php_includes/check_login_status_member.php');
if ($user_ok == false ){
    exit();
}
$sql = "SELECT * FROM members WHERE id_member='$log_id' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    $id_komunitas = $row['id_komunitas'];
    $id_card = $row['id_card'];
    $nama_lengkap = $row['nama_lengkap'];
    $id_member = $row['id_member'];
    $avatar = $row['avatar'];
    $profile_pic = $avatar;
    if($avatar == NULL){
    $profile_pic = 'avatar-1-256.png';
    }
}
if (isset($_GET['id'])){
    $id = preg_replace('#[^0-9]#', '', $_GET['id']);
    if (empty($id)) {
        $id = $id_card;
    }
}
else {
    $id = $id_card;
}
$sqlcard = "SELECT * FROM card WHERE id_card='$id' LIMIT 1";
$querycard = mysqli_query($db_conx, $sqlcard);
while ($rowcard = mysqli_fetch_array($querycard, MYSQLI_ASSOC)) {
    $background = $rowcard['image'];
    // $background = "cardbranch/bg.png";
}
$nol = str_pad($id_member, 7, "0", STR_PAD_LEFT);
$detail = pathinfo($background);
$detail2 = pathinfo($avatar);
if ($detail['extension'] == 'png'){
    $img            = imagecreatefrompng('assets/img/card/background/'.$background.'');
} else if ($detail['extension'] == 'jpg' || $detail['extension'] == 'jpeg') {
    $img            = imagecreatefromjpeg('assets/img/card/background/'.$background.'');
}
// if ($detail['extension'] == 'png'){
//     $img            = imagecreatefrompng($background);
// } else if ($detail['extension'] == 'jpg' || $detail['extension'] == 'jpeg') {
//     $img            = imagecreatefromjpeg($background);
// }
if($avatar == NULL){
  $eclipse        = imagecreatefrompng('assets/img/'.$profile_pic.'');
  $mask = imagecreatetruecolor(256, 256);
  $black = imagecolorallocate($mask, 0, 0, 0);
  $magenta = imagecolorallocate($mask, 255, 0, 255);
  imagefill($mask, 0, 0, $magenta);
  imagefilledellipse(
      $mask,
      (256 / 2),
      (256 / 2),
      256,
      256,
      $black
  );
  imagecolortransparent($mask, $black);
  imagecolortransparent($eclipse, $magenta);
  imagecopymerge($eclipse, $mask, 0, 0, 0, 0, 256, 256, 100);
  imagedestroy($mask);
} else {
    if ($detail2['extension'] == 'jpg' || $detail2['extension'] == 'jpeg'){
        $eclipsex        = imagecreatefromjpeg('assets/img/user/profilepicture/'.$profile_pic);
        $eclipse = imagescale($eclipsex, 172, 172);

    } else if ($detail2['extension'] == 'png') {
        $eclipsex        = imagecreatefrompng('assets/img/user/profilepicture/'.$profile_pic);
        $eclipse = imagescale($eclipsex, 172, 172);
    }
    $mask = imagecreatetruecolor(172, 172);
    $black = imagecolorallocate($mask, 0, 0, 0);
    $magenta = imagecolorallocate($mask, 255, 0, 255);
    imagefill($mask, 0, 0, $magenta);
    imagefilledellipse(
        $mask,
        (168 / 2),
        (168 / 2),
        168,
        168,
        $black
    );
    imagecolortransparent($mask, $black);
    imagecolortransparent($eclipse, $magenta);
    imagecopymerge($eclipse, $mask, 0, 0, 0, 0, 172, 172, 100);
    imagedestroy($mask);
}
// $barisputih     = imagecreatefrompng('assets/img/card/placeholder/barisputih.png');
// $barisbiru      = imagecreatefrompng('assets/img/card/placeholder/barisbiru.png');
$layernama      = imagecreatefrompng('cardbranch/layernama2.png');
$layertipe      = imagecreatefrompng('cardbranch/layertipe2.png');
$shapeatas      = imagecreatefrompng('cardbranch/shapeatas.png');
$shapebawah      = imagecreatefrompng('cardbranch/shapebawah.png');
$layernomor      = imagecreatefrompng('cardbranch/layernomor.png');
// $rec            = imagecreatefrompng('cardbranch/rec.png');
$bisnisabah      = imagecreatefrompng('cardbranch/x.png');
$putih          = imagecolorallocate( $img, 255, 255, 255 );

imagealphablending($img, true);
imagesavealpha($img, true);
imageantialias($eclipse, true);
imagecopymerge($img, $layernama, 162, 51, 0, 0, 762, 69, 50);
imagecopymerge($img, $layertipe, 122, 131, 0, 0, 728, 54, 50);
imagecopymerge($img, $shapeatas, 153, 51, 0, 0, 770, 5, 100);
imagecopymerge($img, $shapebawah, 126, 131, 0, 0, 724, 4, 100);
imagecopymerge($img, $layernomor, 0, 335, 0, 0, 1050, 90, 50);
imagecopymerge($img, $bisnisabah, 783, 463, 0, 0, 266, 142, 60);
// imagecopymerge($img, $rec, 0, 335, 0, 0, 1050, 90, 50);
imagecopymerge($img, $eclipse, 33, 36, 0, 0, 172, 172, 100);
imagettftext($img, 34, 0, 234, 105, $putih, 'assets/img/card/font/norwester.otf', $nama_lengkap);
imagettftext($img, 23, 0, 234, 172, $putih, 'assets/img/card/font/norwester.otf', "Personal Member");
imagettftext($img, 45, 0, 110, 403, $putih, 'assets/img/card/font/norwester.otf', "01.04.2010 - ".$nol);
header('Content-Type: image/jpeg');
imagepng( $img );
imagecolordeallocate( $color );
imagedestroy( $img );
  

?>

и вот как выглядит изображение на веб-странице: webpagescreenshot

и проблема в том, что я хочу добавить к изображению скос и тиснение, а также радиус границы около 20 пикселей или что-то в этом роде, и, конечно, мы могли бы сделать это с помощью css, но когда пользователь загружает изображение, стиль, конечно, исчезнет. я пытался найти опцию canvas, чтобы скос и тиснение выглядели реалистично, как скос и тиснение в Photoshop, и это изображение, которого я хочу добиться: это изображение, созданное photoshop

поэтому, когда они загружают изображение, они также получают изображение с радиусом границы и скосом, так есть ли способ сделать этот эффект изображения с помощью phpgd или canvas?, спасибо за вашу помощь. и извините за мой плохой английский.

Комментарии:

1. Привет, вы нашли решение для этого? если да, пожалуйста, поделитесь. Спасибо.

2. да, я использую php и js canvas, если я не ошибаюсь, я потерял файл, потому что это было год назад, так что извините за это