В последнее время были достигнуты соответствующие проекты, поскольку проект использует 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; }
Выше приведено все содержание этой статьи. Я надеюсь, что это будет полезно для изучения каждого, и я надеюсь, что вы будете больше поддерживать разработчика.