🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 开发准备 首先打开`Xfce终端`,启动服务 启动 php7.2-fpm: ~~~ $ sudo service php7.2-fpm start ~~~ 配置 nginx: ~~~ $ sudo vim /etc/nginx/sites-available/default ~~~ 修改相应的配置: ~~~ server { listen 80 default_server; listen [::]:80 default_server ipv6only=on; #root /usr/share/nginx/html; #root /var/www/laravel/public; root /home/shiyanlou/Code; . . . ~~~ 然后重启 nginx: ~~~ $ sudo service nginx reload ~~~ 进入`/home/shiyanlou/Code`目录 ~~~ $ cd /home/shiyanlou/Code ~~~ 为了开发的便利,修改`Code`目录的权限 ~~~ $ sudo chmod -R 777 /home/shiyanlou/Code ~~~ 在目录`/home/shiyanlou/Code`下,下载`phpqrcode.zip`和`logo.jpg`。 * 下载`phpqrcode` ~~~ $ wget http://labfile.oss.aliyuncs.com/courses/991/phpqrcode.zip ~~~ * 下载 logo ~~~ $ wget http://labfile.oss.aliyuncs.com/courses/991/logo.jpg ~~~ * 解压`phpqrcode.zip` ~~~ $ unzip phpqrcode.zip ~~~ ## 三、实验步骤 解压后得到`phpqrcode`文件夹,文件包含`phpqrcode.php`,我们需要使用`phpqrcode.php`里面的`QrCode`类的`png`方法。 通过编辑器`brackets`打开文件夹`/home/shiyanlou/Code`然后查看在`phpqrcode`文件夹下的`phpqrcode.php`文件的 3091 行(跳转指定行快捷键:ctrl + G,然后输入 3091 后回车) ~~~ public static function png($text, $outfile = false, $level = QR_ECLEVEL_L, $size = 3, $margin = 4, $saveandprint=false) { $enc = QRencode::factory($level, $size, $margin); return $enc->encodePNG($text, $outfile, $saveandprint=false); } ~~~ 函数参数的详细说明: | 参数 | 含义 | | --- | --- | | text | 二维码的url | | outfile | 不生成图片文件,默认为false | | level | 控制二维码容错率,默认为L,范围:L、M、Q、H | | size | 生成图片的大小,默认为4,范围:1-10 | | margin | 生成二维码的空白区域大小 | | saveandprint | 保存二维码图片并显示出来,$outfile必须传递图片路径 | 1. 使用`brackets`,在`Code`下,创建新文件`qrcode1.php`(实现生成原始的二维码) `编辑`文件`/home/shiyanlou/Code/qrcode1.php`下 ~~~ <?php include "./phpqrcode/phpqrcode.php"; $url="http://www.shiyanlou.com"; $path = false; $level = "L"; $size = 10; $margin = 2; $qrcode = new Qrcode(); $qrcode->png($url, $path, $level, $size, $margin); ?> ~~~ 通过在线环境的`火狐浏览器`,输入`localhost/qrcode1.php`![此处输入图片的描述](https://doc.shiyanlou.com/document-uid572534labid4088timestamp1511947131040.png) 此时可以打开你的手机,扫描这个二维码,进入[实验楼首页](https://www.shiyanlou.com/)。 2. 接下来添加新功能:保存图片文件并输出图片 使用`brackets`,在`Code`下,创建新文件`qrcode2.php``编辑`文件`/home/shiyanlou/Code/qrcode2.php` ~~~ <?php include "./phpqrcode/phpqrcode.php"; $url="http://www.shiyanlou.com"; $path = 'shiyanlou.png'; $level = "L"; $size = 10; $margin = 2; $qrcode = new Qrcode(); $qrcode->png($url, $path, $level, $size, $margin); //保存二维码,并输出显示 $QR = imagecreatefromstring(file_get_contents($path)); imagepng($QR, 'shiyanlou.png'); imagedestroy($QR); echo '<img src="shiyanlou.png" alt="请扫码">'; ?> ~~~ 通过在线环境的`火狐浏览器`,输入`localhost/qrcode2.php`![此处输入图片的描述](https://doc.shiyanlou.com/document-uid572534labid4088timestamp1511948507813.png) 可以查看生成了图片`shiyanlou.png`![此处输入图片的描述](https://doc.shiyanlou.com/document-uid18510labid4088timestamp1514517999788.png) 3. 最后实现在二维码上添加 logo 先把前面生成的`shiyanlou.png`删除 ~~~ $ rm shiyanlou.png ~~~ 使用`brackets`,在`Code`下,创建新文件`qrcode3.php``编辑`文件`/home/shiyanlou/Code/qrcode3.php` ~~~ <?php include "./phpqrcode/phpqrcode.php"; $url="http://www.shiyanlou.com"; $path = 'shiyanlou.png'; $level = "L"; $size = 10; $margin = 2; $qrcode = new Qrcode(); $qrcode->png($url, $path, $level, $size, $margin); $logo = 'logo.jpg'; // 中间的logo图片 $QR = $path; if(file_exists(@$logo) && $path !== false){ // 从字符串中的图像流新建图像 $QR = imagecreatefromstring(file_get_contents($QR)); $logo = imagecreatefromstring(file_get_contents($logo)); // 获取 QR 的宽高 $QR_width = imagesx($QR); $QR_height = imagesy($QR); // 获取 logo 的宽高 $logo_width = imagesx($logo); $logo_height = imagesy($logo); //获取二维码上的 logo 宽 $logo_qr_width = $QR_width / 5; // 获取缩小比例 $scale = $logo_width / $logo_qr_width; //获取等比例二维码上的 logo 高 $logo_qr_height = $logo_height / $scale; // 获取 logo 在二维码上的开始的坐标点 $start_xy = ($QR_width - $logo_qr_width) / 2; // 把 logo 拷贝到 QR 上 imagecopyresampled($QR, $logo, $start_xy, $start_xy, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height); $last = 'logo_'.$path; //保存带 logo 的二维码 imagepng($QR, $last); imagedestroy($QR); imagedestroy($logo); } //如果存在logo就显示带logo的二维码,否则就显示原始二维码 if(file_exists(@$last)){ echo "<img src='$last' alt='请扫码'>"; }else{ echo "<img src='$path' alt='请扫码'>"; } ~~~ 关于bool imagecopyresampled 的说明:`bool imagecopyresampled ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )` | 参数 | 含义 | | --- | --- | | dst\_image | 新建的图片 | | src\_image | 需要载入的图片 | | dst\_x | 设定需要载入的图片在新图中的x坐标 | | dst\_y | 设定需要载入的图片在新图中的y坐标,x,y同为 0 则从左上角开始 | | src\_x | 设定载入图片要载入的区域x坐标 | | src\_y | 设定载入图片要载入的区域y坐标,x,y同为 0 则从左上角开始 | | dst\_w | 设定载入的原图的宽度(在此设置缩放) | | dst\_h | 设定载入的原图的高度(在此设置缩放) | | src\_w | 原图要载入的宽度 | | src\_h | 原图要载入的高度 | 通过在线环境的`火狐浏览器`,输入`localhost/qrcode3.php` ![此处输入图片的描述](https://doc.shiyanlou.com/document-uid18510labid4088timestamp1514518249996.png) 生成了原二维码`shiyanlou.png`和带有 logo 的二维码`logo_shiyanlou.png`![此处输入图片的描述](https://doc.shiyanlou.com/document-uid18510labid4088timestamp1514518183363.png) ## 四、实验总结 二维码的生成,到此就结束了。二维码在实际使用中的场景很多,大家可以在掌握了二维码的生成后,根据自己的能力进行一些扩展训练。将它使用在一些具体的项目中。 ## 五、课后扩展 如何在框架中用`phpqrcode`生成二维码。 这里我给出 laravel 5.5 LTS 版本的代码。有兴趣的同学可以在环境中试一试。`laravel 5.5`的开发环境已经配置好了,在目录`/home/shiyanlou/Code/myweb`下。 配置 nginx ~~~ $ sudo vim /etc/nginx/sites-available/default ~~~ 修改相应配置 ~~~ server { listen 80 default_server; listen [::]:80 default_server ipv6only=on; #root /usr/share/nginx/html; #root /var/www/laravel/public; root /home/shiyanlou/Code/myweb/public; . . . ~~~ 然后重启 nginx ~~~ $ sudo service nginx reload ~~~ 进入`myweb`目录 ~~~ $ cd myweb ~~~ 执行 composer 下载`aferrandini/phpqrcode` 由于国内网络原因,有时候 Composer 安装会花费很多时间,甚至出错。 这里推荐使用 Packagist / Composer 中国全量镜像 来加速 Composer 的操作。 我们只需要修改 Composer 的全局配置文件即可: ~~~ composer config -g repo.packagist composer https://packagist.phpcomposer.com ~~~ > 此步需要链接外网,非会员用户请在本地就行扩展练习。 ~~~ $ composer require aferrandini/phpqrcode ~~~ ![此处输入图片的描述](https://doc.shiyanlou.com/document-uid572534labid4088timestamp1513840846272.png) 再执行命令生成控制器`QrcodeController` ~~~ $ php artisan make:controller QrcodeController ~~~ 先进入目录`public` ~~~ $ cd public ~~~ 下载 ~~~ $ wget http://labfile.oss.aliyuncs.com/courses/991/logo.jpg ~~~ `编辑`文件`app/Http/Controllers/QrcodeController.php` ~~~ <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; use PHPQRCode\QRcode; class QrcodeController extends Controller { public function show() { return view('qrcode'); } public function create() { $url="http://www.shiyanlou.com"; $path = 'shiyanlou.png'; $level = "L"; $size = 10; $margin = 2; $qrcode = new QRcode(); $qrcode->png($url, $path, $level, $size, $margin); $logo = 'logo.jpg'; // 中间的logo图片 $QR = $path; if(file_exists(@$logo) && $path !== false){ $QR = imagecreatefromstring(file_get_contents($QR)); $logo = imagecreatefromstring(file_get_contents($logo)); $QR_width = imagesx($QR); $QR_height = imagesy($QR); $logo_width = imagesx($logo); $logo_height = imagesy($logo); $logo_qr_width = $QR_width / 5; $scale = $logo_width / $logo_qr_width; $logo_qr_height = $logo_height / $scale; $from_width = ($QR_width - $logo_qr_width) / 2; imagecopyresampled($QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height); header('Content-type:image/png'); imagepng($QR); imagedestroy($QR); imagedestroy($logo); } } } ~~~ 再`编辑`文件`routes/web.php`(添加新的路由) ~~~ <?php /* |-------------------------------------------------------------------------- | Application Routes |-------------------------------------------------------------------------- | | Here is where you can register all of the routes for an application. | It's a breeze. Simply tell Laravel the URIs it should respond to | and give it the controller to call when that URI is requested. | */ Route::get('/', function () { return view('welcome'); }); Route::get('qrcode', 'QrcodeController@show'); Route::get('qrcode/create', 'QrcodeController@create'); ~~~ 创建文件并编辑`resources/views/qrcode.blade.php` ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二维码展示</title> </head> <body> <h1>二维码展示:</h1> <img src="{{url('qrcode/create')}}" alt="请扫码"> </body> </html> ~~~ 最后在浏览器输入地址`localhost/qrcode`![此处输入图片的描述](https://doc.shiyanlou.com/document-uid572534labid4088timestamp1513842033269.png)