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 htmlentities和htmlspecialchars 的区别
Aug 18 PHP
PHP 图片上传实现代码 带详细注释
Apr 29 PHP
PHP is_dir() 判断给定文件名是否是一个目录
May 10 PHP
基于php设计模式中工厂模式详细介绍
May 15 PHP
Yii中render和renderPartial的区别
Sep 03 PHP
php的XML文件解释类应用实例
Sep 22 PHP
php制作动态随机验证码
Feb 12 PHP
最新制作ThinkPHP3.2.3完全开发手册
Nov 23 PHP
PHP与jquery实时显示网站在线人数实例详解
Dec 02 PHP
php插件Xajax使用方法详解
Aug 31 PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 PHP
深入理解PHP+Mysql分布式事务与解决方案
Dec 03 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之第四天
2006/10/09 PHP
深入了解php4(2)--重访过去
2006/10/09 PHP
PHP 函数语法介绍一
2009/06/14 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
vue组件间通信解析
2017/03/01 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python递归计算N!的方法
2015/05/05 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Django之路由层的实现
2019/09/09 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
详解python中的异常捕获
2020/12/15 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
英文自我鉴定
2013/12/10 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
车队安全员岗位职责
2015/02/15 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Django中celery的使用项目实例
2022/07/07 Python