php+js实现裁剪任意形状图片


Posted in PHP onOctober 31, 2018

最近做到相关的项目,由于项目使用html2canvas,但是不支持css mask属性,故,利用php后台来裁剪。

准备两张图片,一张是镂空PNG图案,一张是任意纯色图片。

便能够在纯色图片上裁剪出镂空的图案为PNG文件。

见下图。

首先两张PNG图片:

php+js实现裁剪任意形状图片php+js实现裁剪任意形状图片

生成图片

php+js实现裁剪任意形状图片

 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 iconv 函数转gb2312的bug解决方法
Oct 11 PHP
用PHP实现读取和编写XML DOM代码
Apr 07 PHP
兼容firefox,chrome的网页灰度效果
Aug 08 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
May 06 PHP
PHP转盘抽奖接口实例
Feb 09 PHP
php实现网站顶踩功能的完整前端代码
Jul 19 PHP
php如何实现只替换一次或N次
Oct 29 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
Dec 23 PHP
PHP 接入支付宝即时到账功能
Sep 18 PHP
php实现用户登陆简单实例
Apr 04 PHP
PHP的PDO预处理语句与存储过程
Jan 27 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
Feb 26 PHP
workerman结合laravel开发在线聊天应用的示例代码
Oct 30 #PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
Oct 30 #PHP
swoole_process实现进程池的方法示例
Oct 29 #PHP
PHP大文件分片上传的实现方法
Oct 28 #PHP
PHP array_reduce()函数的应用解析
Oct 28 #PHP
php 中phar包的使用教程详解
Oct 26 #PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
Oct 25 #PHP
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP实现简易blog的制作
2016/10/24 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python框架django基础指南
2016/09/08 Python
python中的闭包函数
2018/02/09 Python
Python使用OpenCV进行标定
2018/05/08 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
秘书行业自我鉴定范文
2013/12/30 职场文书
毕业生的自我评价
2013/12/30 职场文书
25岁生日感言
2014/01/13 职场文书
大学生就业意向书范文
2014/04/01 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
详解如何使用Nginx解决跨域问题
2022/05/06 Servers