php+js實現裁剪任意形狀圖片

時間 2019-12-04

標籤 php+js php 實現裁剪任意形狀圖片欄目 PHP 简体版

原文原文鏈接

最近作到相關的項目，因爲項目使用html2canvas，可是不支持css mask屬性，故，利用php後臺來裁剪。php

準備兩張圖片，一張是鏤空PNG圖案，一張是任意純色圖片。css

便可以在純色圖片上裁剪出鏤空的圖案爲PNG文件。html

見下圖。ajax

首先兩張PNG圖片：編程

生成圖片canvas

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截圖 
        
         $.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" 
         );  
        
         // 生成截取後的圖片並保存在本地 
        
         imagepng(  
         $source 
         , 
         "assets/images/crop/" 
         . 
         $cropPicName 
         . 
         ".png" 
         ); 
        
         //銷燬圖片內存 
        
         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 
         ; 
        
         }


【PHP實戰】PHP框架之ThinkPHP項目開發CMS內容管理系統
php基礎視頻教程 20課附源碼課件
最新PHP3小時光速入門視頻教程 13課附源碼課件
ThinkPHP5.0+微信小程序商城構建全棧應用完整版 ...2
ThinkPHP3.12免費視頻教程
【PHP實戰】留言本項目實戰
【php項目實戰】php在線商城系統開發教程
【php項目實戰】博客系統
李炎恢基於ThinkPHP+EasyUI的CRM客戶關係管理系統
李炎恢PHP第四季視頻課程(ThinkPHP+jQuery+UI+微博系統)
李炎恢php第三季（在線商城系統）
李炎恢php第二季（面向對象項目實戰）
李炎恢php第一季視頻教程（php基礎+項目）
新版ThinkPHP視頻教程 30課附源碼課件
BroPHP框架與項目實戰視頻教程兩套
PHP項目實戰之美團網開發視頻教程 40課附源碼資料
基於HDPHP的防360問答系統項目實戰視頻教程 28課
零基礎系統講解PHP+MySQL網絡編程技術視頻課程 41課
PHP網站開發工程師就業指導班 35課附課件、源碼
PHP大型門戶網站核心技術之頁面靜態化附課件、源碼、軟件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。