Рубрики
Uncategorized

Вырезание изображений произвольной формы с помощью PHP + JS

Автор оригинала: David Wong.

В последнее время были достигнуты соответствующие проекты, поскольку проект использует HTML2canvas, но не поддерживает атрибут маски CSS, поэтому для адаптации используется фон PHP.

Подготовьте две картинки, одна из которых представляет собой полый рисунок PNG, другая-любая чистая цветная картинка.

Он может вырезать пустотелые узоры в файлы PNG на чистых цветных изображениях.

См. Рисунок ниже.

Первые две картинки в формате PNG:

Создание изображений

Фрагмент JS:

html2canvas($(".head1pic"), {
     onrendered: function(canvas) { 
     url = canvas.toDataURL("image/png", 1.0);
       sourcePic = "assets/images/demo.png";
       maskPic = "assets/images/jinmao.png";
          cropPicName = "cropDog1";
          // Ajax PHP screenshot
          $.ajax({
          type: 'post',
           url: 'getpicture',
          data: {
            "sourcePic": sourcePic,
            "maskPic": maskPic,
            "cropPicName": cropPicName
            },
         success: function(data) {
             $(".page2Bg")[0].setAttribute("src", "assets/images/crop/cropDog1.png"); 
            },
         error: function(data) {
              console.log(data)
              }
            });
       }
 });

Фрагменты PHP:

public function actionGetpicture()
  {  
     $request = Yii::$app->request;
    $sourcePic=$request->post('sourcePic');
    $maskPic=$request->post('maskPic'); 
    $cropPicName=$request->post('cropPicName'); 
 
    // $sourcePic="http://bings.local.com/bi_ngs2_2/assets/images/yinpian1/page2Bg4.png";
    // $maskPic="http://bings.local.com/bi_ngs2_2/assets/images/jinmao.png";
    $source = imagecreatefrompng( $sourcePic );
    $mask = imagecreatefrompng( $maskPic); 
    // Apply mask to source
    // imagealphamask( $source, $mask );
    $this->imagealphamask ($source, $mask );
    // Output
    header( "Content-type: image/png"); 
    // Generate captured images and save them locally
    imagepng( $source,"assets/images/crop/".$cropPicName.".png" );
    // Destroy image memory
    imagedestroy($source);
      
  }
 
  public function imagealphamask( &$picture, $mask ) {
    // Get sizes and set up new picture
    $xSize = imagesx( $picture );
    $ySize = imagesy( $picture );
    $newPicture = imagecreatetruecolor( $xSize, $ySize );
    imagesavealpha( $newPicture, true );
    imagefill( $newPicture, 0, 0, imagecolorallocatealpha( $newPicture, 100, 100, 0, 127 ) );
 
    // Resize mask if necessary
    // if( $xSize != imagesx( $mask ) || $ySize != imagesy( $mask ) ) {
    //   $tempPic = imagecreatetruecolor( $xSize, $ySize );
    //   imagecopyresampled( $tempPic, $mask, 0, 0, 0, 0, $xSize, $ySize, imagesx( $mask ), imagesy( $mask ) );
    //   imagedestroy( $mask );
    //   $mask = $tempPic;
    // }
 
    // Perform pixel-based alpha map application
    for( $x = 0; $x < $xSize; $x++ ) {
      for( $y = 0; $y < $ySize; $y++ ) {
        $alpha = imagecolorsforindex( $mask, imagecolorat( $mask, $x, $y ) );
        //small mod to extract alpha, if using a black(transparent) and white
        //mask file instead change the following line back to Jules's original:
        // $alpha = 127 - floor($alpha['black'] / 2);
        //or a white(transparent) and black mask file:
        // $alpha = floor($alpha['black'] / 2);
        $alpha = $alpha['alpha'];
        $color = imagecolorsforindex( $picture, imagecolorat( $picture, $x, $y ) );
        //preserve alpha by comparing the two values
        if ($color['alpha'] > $alpha)
          $alpha = $color['alpha'];
        //kill data for fully transparent pixels
        if ($alpha == 127) {
          $color['red'] = 0;
          $color['blue'] = 0;
          $color['green'] = 0;
        }
        imagesetpixel( $newPicture, $x, $y, imagecolorallocatealpha( $newPicture, $color[ 'red' ], $color[ 'green' ], $color[ 'blue' ], $alpha ) );
      }
    }
 
    // Copy back to original picture
    imagedestroy( $picture );
    $picture = $newPicture;
  }

Выше приведено все содержание этой статьи. Я надеюсь, что это будет полезно для изучения каждого, и я надеюсь, что вы будете больше поддерживать разработчика.