ホームページ バックエンド開発 PHPチュートリアル php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法_PHP

php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法_PHP

May 31, 2016 pm 06:15 PM
カット 写真 回転させる

本文实例讲述了php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法。分享给大家供大家参考。具体分析如下:

一个可以供PHP调用ImageMagick功能的PHP扩展。使用这个扩展可以使PHP具备和ImageMagick相同的功能。

ImageMagick是一套功能强大、稳定而且免费的工具集和开发包,可以用来读、写和处理超过185种基本格式的图片文件,包括流行的TIFF, JPEG, GIF, PNG, PDF以及PhotoCD等格式。利用ImageMagick,你可以根据web应用程序的需要动态生成图片, 还可以对一个(或一组)图片进行改变大小、旋转、锐化、减色或增加特效等操作,并将操作的结果以相同格式或其它格式保存。

php_imagick是PHP对图片处理的一个扩展包,可以完成对图片改变大小、旋转、锐化、减色或增加特效等操作。

一、windows下安装Imagick扩展:

1、下载 ImageMagick并安装

http://image_magick.veidrodis.com/image_magick/binaries/ImageMagick-6.6.2-10-Q16-windows-dll.exe

2、下载php_imagick.dll

http://valokuva.org/outside-blog-content/imagick-windows-builds/php53/imagick-2.3.0-dev/vc9_nts/php_imagick.dll

如果你用的是线程安全的php,请下载

http://valokuva.org/outside-blog-content/imagick- windows-builds/php53/imagick-2.3.0-dev/vc9_zts/php_imagick.dll

3、设置

在php.ini中添加

extension=php_imagick.dll ,重启web server

二、linux下安装Imagick扩展:

1.yum安装ImageMagick

yum install ImageMagick ImageMagick-devel

2.测试是否安装成功

convert -version

3.安装imagick扩展
 
01.wget http://pecl.php.net/get/imagick-3.1.0RC2.tgz02.tar xzvf imagick-3.1.0RC2.tgz03.cd imagick-3.1.0RC204.phpize05../configure06.make07.make install

4.编辑php.ini文件,在文件末尾添加如下代码

extension=imagick.so

5. 重新启动apache服务器

service httpd restart

三、案例

1. 边框处理

代码如下:

header('Content-type: image/jpeg'); 
$image = new Imagick('test.jpg'); 
$color=new ImagickPixel(); 
$color->setColor("rgb(220,220,220)"); 
$image->borderImage($color,5,4); 
$image->blurImage(5,5,imagick::CHANNEL_GREEN); 
echo $image;


我们先来看个简单的实例

php_imagick程序示例

1.创建一个缩略图并显示出来

代码如下:

header('Content-type: image/jpeg'); 
$image = new Imagick('image.jpg'); 
// If 0 is provided as a width or height parameter,// aspect ratio is maintained 
$image->thumbnailImage(100, 0); 
echo $image; 
?>


2.创建一个目录下的缩略图,并保存

代码如下:

$images = new Imagick(glob('images/*.JPG')); 
foreach($images as $image) { 
// Providing 0 forces thumbnailImage to maintain aspect ratio  
$image->thumbnailImage(1024,0); 

$images->writeImages(); 
?>


3.缩略GIF动画图片

代码如下:

/* Create a new imagick object and read in GIF */
$im = new Imagick("example.gif"); 
/* Resize all frames */
foreach ($im as $frame) { 
/* 50x50 frames */
$frame->thumbnailImage(50, 50); 
/* Set the virtual canvas to correct size */
$frame->setImagePage(50, 50, 0, 0); 
}/* Notice writeImages instead of writeImage */
$im->writeImages("example_small.gif", true); 
?>


现在我们进入正题吧,

示例:

裁切/生成缩略图/添加水印, 自动检测和处理 GIF

调用方式:

代码如下:

include 'imagick.class.php'; 
$image = new lib_image_imagick(); 
$image->open('a.gif'); 
$image->resize_to(100, 100, 'scale_fill'); 
$image->add_text('1024i.com', 10, 20); 
$image->add_watermark('1024i.gif', 10, 50); 
$image->save_to('x.gif');
imagick.class.php

class lib_image_imagick 

 private $image = null; 
 private $type = null; 
 // 构造函数 
 public function __construct(){} 
 
 // 析构函数 
 public function __destruct() 
 { 
     if($this->image!==null) $this->image->destroy();  
 } 
 // 载入图像 
 public function open($path) 
 { 
  $this->image = new Imagick( $path ); 
  if($this->image) 
  { 
      $this->type = strtolower($this->image->getImageFormat()); 
  } 
  return $this->image; 
 } 
  
 public function crop($x=0, $y=0, $width=null, $height=null) 
 { 
     if($width==null) $width = $this->image->getImageWidth()-$x; 
     if($height==null) $height = $this->image->getImageHeight()-$y; 
     if($width       
     if($this->type=='gif') 
     { 
            $image = $this->image; 
         $canvas = new Imagick(); 
          
         $images = $image->coalesceImages(); 
         foreach($images as $frame){ 
             $img = new Imagick(); 
             $img->readImageBlob($frame); 
                $img->cropImage($width, $height, $x, $y); 
                $canvas->addImage( $img ); 
                $canvas->setImageDelay( $img->getImageDelay() ); 
                $canvas->setImagePage($width, $height, 0, 0); 
            } 
             
            $image->destroy(); 
         $this->image = $canvas; 
     } 
     else
     { 
         $this->image->cropImage($width, $height, $x, $y); 
     } 
 } 
 /*
 * 更改图像大小 
 $fit: 适应大小方式 
 'force': 把图片强制变形成 $width X $height 大小 
 'scale': 按比例在安全框 $width X $height 内缩放图片, 输出缩放后图像大小 不完全等于 $width X $height 
 'scale_fill': 按比例在安全框 $width X $height 内缩放图片,安全框内没有像素的地方填充色, 使用此参数时可设置背景填充色 $bg_color = array(255,255,255)(红,绿,蓝, 透明度) 透明度(0不透明-127完全透明)) 
 其它: 智能模能 缩放图像并载取图像的中间部分 $width X $height 像素大小 
 $fit = 'force','scale','scale_fill' 时: 输出完整图像 
 $fit = 图像方位值 时, 输出指定位置部分图像  
 字母与图像的对应关系如下: 
  
 north_west   north   north_east 
  
 west         center        east 
  
 south_west   south   south_east 
  
 */
 public function resize_to($width = 100, $height = 100, $fit = 'center', $fill_color = array(255,255,255,0) ) 
 { 
      
     switch($fit) 
     { 
         case 'force': 
             if($this->type=='gif') 
             { 
                 $image = $this->image; 
                 $canvas = new Imagick(); 
                  
                 $images = $image->coalesceImages(); 
                 foreach($images as $frame){ 
                     $img = new Imagick(); 
                     $img->readImageBlob($frame); 
                        $img->thumbnailImage( $width, $height, false ); 
                        $canvas->addImage( $img ); 
                        $canvas->setImageDelay( $img->getImageDelay() ); 
                    } 
                    $image->destroy(); 
                 $this->image = $canvas; 
             } 
             else
             { 
                 $this->image->thumbnailImage( $width, $height, false ); 
             } 
             break; 
         case 'scale': 
             if($this->type=='gif') 
             { 
                 $image = $this->image; 
                 $images = $image->coalesceImages(); 
                 $canvas = new Imagick(); 
                 foreach($images as $frame){ 
                     $img = new Imagick(); 
                     $img->readImageBlob($frame); 
                        $img->thumbnailImage( $width, $height, true ); 
                        $canvas->addImage( $img ); 
                        $canvas->setImageDelay( $img->getImageDelay() ); 
                    } 
                    $image->destroy(); 
                 $this->image = $canvas; 
             } 
             else
             { 
                 $this->image->thumbnailImage( $width, $height, true ); 
             } 
             break; 
         case 'scale_fill': 
             $size = $this->image->getImagePage();  
             $src_width = $size['width']; 
             $src_height = $size['height']; 
              
                $x = 0; 
                $y = 0; 
                 
                $dst_width = $width; 
                $dst_height = $height; 
    if($src_width*$height > $src_height*$width) 
    { 
     $dst_height = intval($width*$src_height/$src_width); 
     $y = intval( ($height-$dst_height)/2 ); 
    } 
    else
    { 
     $dst_width = intval($height*$src_width/$src_height); 
     $x = intval( ($width-$dst_width)/2 ); 
    } 
                $image = $this->image; 
                $canvas = new Imagick(); 
                 
                $color = 'rgba('.$fill_color[0].','.$fill_color[1].','.$fill_color[2].','.$fill_color[3].')'; 
             if($this->type=='gif') 
             { 
                 $images = $image->coalesceImages(); 
                 foreach($images as $frame) 
                 { 
                     $frame->thumbnailImage( $width, $height, true ); 
                     $draw = new ImagickDraw(); 
                        $draw->composite($frame->getImageCompose(), $x, $y, $dst_width, $dst_height, $frame); 
                        $img = new Imagick(); 
                        $img->newImage($width, $height, $color, 'gif'); 
                        $img->drawImage($draw); 
                        $canvas->addImage( $img ); 
                        $canvas->setImageDelay( $img->getImageDelay() ); 
                        $canvas->setImagePage($width, $height, 0, 0); 
                    } 
             } 
             else
             { 
                 $image->thumbnailImage( $width, $height, true ); 
                  
                 $draw = new ImagickDraw(); 
                    $draw->composite($image->getImageCompose(), $x, $y, $dst_width, $dst_height, $image); 
                     
                 $canvas->newImage($width, $height, $color, $this->get_type() ); 
                    $canvas->drawImage($draw); 
                    $canvas->setImagePage($width, $height, 0, 0); 
             } 
             $image->destroy(); 
             $this->image = $canvas; 
             break; 
   default: 
    $size = $this->image->getImagePage();  
       $src_width = $size['width']; 
             $src_height = $size['height']; 
              
                $crop_x = 0; 
                $crop_y = 0; 
                 
                $crop_w = $src_width; 
                $crop_h = $src_height; 
                 
          if($src_width*$height > $src_height*$width) 
    { 
     $crop_w = intval($src_height*$width/$height); 
    } 
    else
    { 
        $crop_h = intval($src_width*$height/$width); 
    } 
                 
       switch($fit) 
             { 
        case 'north_west': 
            $crop_x = 0; 
            $crop_y = 0; 
            break; 
           case 'north': 
               $crop_x = intval( ($src_width-$crop_w)/2 ); 
               $crop_y = 0; 
               break; 
           case 'north_east': 
               $crop_x = $src_width-$crop_w; 
               $crop_y = 0; 
               break; 
           case 'west': 
               $crop_x = 0; 
               $crop_y = intval( ($src_height-$crop_h)/2 ); 
               break; 
           case 'center': 
               $crop_x = intval( ($src_width-$crop_w)/2 ); 
               $crop_y = intval( ($src_height-$crop_h)/2 ); 
               break; 
           case 'east': 
               $crop_x = $src_width-$crop_w; 
               $crop_y = intval( ($src_height-$crop_h)/2 ); 
               break; 
           case 'south_west': 
               $crop_x = 0; 
               $crop_y = $src_height-$crop_h; 
               break; 
           case 'south': 
               $crop_x = intval( ($src_width-$crop_w)/2 ); 
               $crop_y = $src_height-$crop_h; 
               break; 
           case 'south_east': 
               $crop_x = $src_width-$crop_w; 
               $crop_y = $src_height-$crop_h; 
               break; 
           default: 
               $crop_x = intval( ($src_width-$crop_w)/2 ); 
               $crop_y = intval( ($src_height-$crop_h)/2 ); 
             } 
              
             $image = $this->image; 
             $canvas = new Imagick(); 
              
          if($this->type=='gif') 
             { 
                 $images = $image->coalesceImages(); 
                 foreach($images as $frame){ 
                     $img = new Imagick(); 
                     $img->readImageBlob($frame); 
                        $img->cropImage($crop_w, $crop_h, $crop_x, $crop_y); 
                        $img->thumbnailImage( $width, $height, true ); 
                         
                        $canvas->addImage( $img ); 
                        $canvas->setImageDelay( $img->getImageDelay() ); 
                        $canvas->setImagePage($width, $height, 0, 0); 
                    } 
             } 
             else
             { 
                 $image->cropImage($crop_w, $crop_h, $crop_x, $crop_y); 
                 $image->thumbnailImage( $width, $height, true ); 
                 $canvas->addImage( $image ); 
                 $canvas->setImagePage($width, $height, 0, 0); 
             } 
             $image->destroy(); 
             $this->image = $canvas; 
     } 
      
 } 
  
 // 添加水印图片 
 public function add_watermark($path, $x = 0, $y = 0) 
 { 
        $watermark = new Imagick($path); 
        $draw = new ImagickDraw(); 
        $draw->composite($watermark->getImageCompose(), $x, $y, $watermark->getImageWidth(), $watermark->getimageheight(), $watermark); 
     if($this->type=='gif') 
     { 
         $image = $this->image; 
            $canvas = new Imagick(); 
         $images = $image->coalesceImages(); 
         foreach($image as $frame) 
         { 
                $img = new Imagick(); 
             $img->readImageBlob($frame); 
                $img->drawImage($draw); 
                 
                $canvas->addImage( $img ); 
                $canvas->setImageDelay( $img->getImageDelay() ); 
            } 
            $image->destroy(); 
         $this->image = $canvas; 
     } 
     else
     { 
         $this->image->drawImage($draw); 
     } 
 } 
  
 // 添加水印文字 
 public function add_text($text, $x = 0 , $y = 0, $angle=0, $style=array()) 
 { 
        $draw = new ImagickDraw(); 
        if(isset($style['font'])) $draw->setFont($style['font']); 
        if(isset($style['font_size'])) $draw->setFontSize($style['font_size']); 
     if(isset($style['fill_color'])) $draw->setFillColor($style['fill_color']); 
     if(isset($style['under_color'])) $draw->setTextUnderColor($style['under_color']); 
      
     if($this->type=='gif') 
     { 
         foreach($this->image as $frame) 
         { 
             $frame->annotateImage($draw, $x, $y, $angle, $text); 
         } 
     } 
     else
     { 
         $this->image->annotateImage($draw, $x, $y, $angle, $text); 
     } 
 } 
  
 // 保存到指定路径 
 public function save_to( $path ) 
 { 
     if($this->type=='gif') 
     { 
         $this->image->writeImages($path, true); 
     } 
     else
     { 
         $this->image->writeImage($path); 
     } 
 } 
 // 输出图像 
 public function output($header = true) 
 { 
     if($header) header('Content-type: '.$this->type); 
     echo $this->image->getImagesBlob();   
 } 
  
 public function get_width() 
 { 
        $size = $this->image->getImagePage();  
        return $size['width']; 
 } 
  
 public function get_height() 
 { 
     $size = $this->image->getImagePage();  
        return $size['height']; 
 } 
 // 设置图像类型, 默认与源类型一致 
 public function set_type( $type='png' ) 
 { 
     $this->type = $type; 
        $this->image->setImageFormat( $type ); 
 } 
 // 获取源图像类型 
 public function get_type() 
 { 
  return $this->type; 
 } 
 
 // 当前对象是否为图片 
 public function is_image() 
 { 
  if( $this->image ) 
   return true; 
  else
   return false; 
 } 
 
 public function thumbnail($width = 100, $height = 100, $fit = true){ $this->image->thumbnailImage( $width, $height, $fit );} // 生成缩略图 $fit为真时将保持比例并在安全框 $width X $height 内生成缩略图片 
 /*
 添加一个边框 
 $width: 左右边框宽度 
 $height: 上下边框宽度 
 $color: 颜色: RGB 颜色 'rgb(255,0,0)' 或 16进制颜色 '#FF0000' 或颜色单词 'white'/'red'... 
 */
 public function border($width, $height, $color='rgb(220, 220, 220)') 
 { 
  $color=new ImagickPixel(); 
  $color->setColor($color); 
  $this->image->borderImage($color, $width, $height); 
 } 
  
 public function blur($radius, $sigma){$this->image->blurImage($radius, $sigma);} // 模糊 
 public function gaussian_blur($radius, $sigma){$this->image->gaussianBlurImage($radius, $sigma);} // 高斯模糊 
 public function motion_blur($radius, $sigma, $angle){$this->image->motionBlurImage($radius, $sigma, $angle);} // 运动模糊 
 public function radial_blur($radius){$this->image->radialBlurImage($radius);} // 径向模糊 
 public function add_noise($type=null){$this->image->addNoiseImage($type==null?imagick::NOISE_IMPULSE:$type);} // 添加噪点 
  
 public function level($black_point, $gamma, $white_point){$this->image->levelImage($black_point, $gamma, $white_point);} // 调整色阶 
 public function modulate($brightness, $saturation, $hue){$this->image->modulateImage($brightness, $saturation, $hue);} // 调整亮度、饱和度、色调 
 public function charcoal($radius, $sigma){$this->image->charcoalImage($radius, $sigma);} // 素描 
 public function oil_paint($radius){$this->image->oilPaintImage($radius);} // 油画效果 
  
 public function flop(){$this->image->flopImage();} // 水平翻转 
 public function flip(){$this->image->flipImage();} // 垂直翻转 
}

希望本文所述对大家的PHP程序设计有所帮助。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか?投稿時に自動保存された画像はどこにありますか? 小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか?投稿時に自動保存された画像はどこにありますか? Mar 22, 2024 am 08:06 AM

ソーシャルメディアの継続的な発展に伴い、Xiaohongshu はますます多くの若者が自分たちの生活を共有し、美しいものを発見するためのプラットフォームとなっています。多くのユーザーは、画像を投稿する際の自動保存の問題に悩まされています。では、この問題をどうやって解決すればよいでしょうか? 1.小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか? 1. キャッシュをクリアする まず、Xiaohongshu のキャッシュ データをクリアしてみます。手順は次のとおりです: (1) 小紅書を開いて右下隅の「マイ」ボタンをクリックします。 (2) 個人センター ページで「設定」を見つけてクリックします。 (3) 下にスクロールして「」を見つけます。 「キャッシュをクリア」オプションを選択し、「OK」をクリックします。キャッシュをクリアした後、Xiaohongshu を再起動し、写真を投稿して、自動保存の問題が解決されるかどうかを確認します。 2. 小紅書バージョンを更新して、小紅書が正しく動作することを確認します。

TikTokのコメントに写真を投稿するにはどうすればよいですか?コメント欄の写真への入り口はどこですか? TikTokのコメントに写真を投稿するにはどうすればよいですか?コメント欄の写真への入り口はどこですか? Mar 21, 2024 pm 09:12 PM

Douyin のショートビデオの人気により、コメント エリアでのユーザーのやり取りがより多彩になりました。ユーザーの中には、自分の意見や感情をよりよく表現するために、コメントで画像を共有したいと考えている人もいます。では、TikTokのコメントに写真を投稿するにはどうすればよいでしょうか?この記事では、この質問に詳しく答え、関連するヒントと注意事項をいくつか紹介します。 1.Douyinのコメントに写真を投稿するにはどうすればよいですか? 1. Douyinを開く: まず、Douyin APPを開いてアカウントにログインする必要があります。 2. コメントエリアを見つける:短いビデオを閲覧または投稿するときに、コメントしたい場所を見つけて「コメント」ボタンをクリックします。 3. コメントの内容を入力します: コメント領域にコメントの内容を入力します。 4. 写真の送信を選択します。コメント内容を入力するインターフェースに「写真」ボタンまたは「+」ボタンが表示されます。

iPhone で写真をより鮮明にする 6 つの方法 iPhone で写真をより鮮明にする 6 つの方法 Mar 04, 2024 pm 06:25 PM

Apple の最近の iPhone は、鮮明なディテール、彩度、明るさで思い出を捉えます。ただし、場合によっては、画像が鮮明に見えなくなる問題が発生することがあります。 iPhone カメラのオートフォーカスは大きく進歩し、写真をすばやく撮影できるようになりましたが、状況によってはカメラが誤って間違った被写体に焦点を合わせ、不要な領域で写真がぼやけてしまうことがあります。 iPhone 上の写真の焦点が合っていない場合、または全体的に鮮明さが欠けている場合は、次の投稿を参照して写真を鮮明にすることができます。 iPhone で写真を鮮明にする方法 [6 つの方法] ネイティブの写真アプリを使用して写真をクリーンアップしてみることができます。さらに多くの機能やオプションが必要な場合

PPT画像を1枚ずつ表示させる方法 PPT画像を1枚ずつ表示させる方法 Mar 25, 2024 pm 04:00 PM

PowerPoint では、画像を 1 枚ずつ表示するのが一般的な手法ですが、これはアニメーション効果を設定することで実現できます。このガイドでは、基本的なセットアップ、画像の挿入、アニメーションの追加、アニメーションの順序とタイミングの調整など、この手法を実装する手順について詳しく説明します。さらに、トリガーの使用、アニメーションの速度と順序の調整、アニメーション効果のプレビューなど、高度な設定と調整が提供されます。これらの手順とヒントに従うことで、ユーザーは PowerPoint で次々に表示される画像を簡単に設定できるため、プレゼンテーションの視覚的な効果が高まり、聴衆の注意を引くことができます。

Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 - Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 - Foxit PDF Reader で PDF ドキュメントを jpg 画像に変換する方法 Mar 04, 2024 pm 05:49 PM

Foxit PDF Reader ソフトウェアも使用していますか? Foxit PDF Reader が PDF ドキュメントを jpg 画像に変換する方法をご存知ですか? 次の記事では、Foxit PDF Reader が PDF ドキュメントを jpg 画像に変換する方法について説明します。 jpg画像は以下からご覧ください。まずFoxit PDF Readerを起動し、上部のツールバーで「機能」を見つけ、「PDF to Others」機能を選択します。次に、「Foxit PDF Online Conversion」というWebページを開きます。ページ右上の「ログイン」ボタンをクリックしてログインし、「PDF to Image」機能をオンにしてください。次にアップロードボタンをクリックし、画像に変換したいPDFファイルを追加し、追加後「変換開始」をクリックします。

JavaScript を使用して画像のドラッグとズーム機能を実装するにはどうすればよいですか? JavaScript を使用して画像のドラッグとズーム機能を実装するにはどうすればよいですか? Oct 27, 2023 am 09:39 AM

JavaScript を使用して画像のドラッグとズーム機能を実装するにはどうすればよいですか?最新の Web 開発では、画像のドラッグとズームは一般的な要件です。 JavaScript を使用すると、画像にドラッグやズーム機能を簡単に追加して、より良いユーザー エクスペリエンスを提供できます。この記事では、JavaScriptを使用してこの機能を実装する方法を、具体的なコード例とともに紹介します。 HTML 構造 まず、画像を表示したり追加したりするための基本的な HTML 構造が必要です。

WPSドキュメントで2つの写真を並べて配置する方法 WPSドキュメントで2つの写真を並べて配置する方法 Mar 20, 2024 pm 04:00 PM

WPS オフィス ソフトウェアを使用すると、使用するフォームは 1 つだけではなく、テキストに表や写真を追加したり、表に写真を追加したりすることもできます。これらをすべて組み合わせて文書全体のコンテンツを作成することができます。文書に 2 つの画像を挿入し、それらを並べて配置する必要がある場合。次のコースでは、この問題を解決します。WPS ドキュメントに 2 つの写真を並べて配置する方法です。 1. まず、WPS ソフトウェアを開き、調整する画像を見つける必要があります。画像を左クリックするとメニューバーが表示されるので「ページレイアウト」を選択します。 2. 文字の折り返しで「タイト折り返し」を選択します。 3. 必要なすべての画像が「テキスト折り返し」に設定されていることを確認したら、画像を適切な位置にドラッグし、最初の画像をクリックします。

HTML、CSS、jQuery を使用して画像の結合と表示の高度な機能を実装する方法 HTML、CSS、jQuery を使用して画像の結合と表示の高度な機能を実装する方法 Oct 27, 2023 pm 04:36 PM

HTML、CSS、jQuery を使用して画像結合表示を実装する方法の高度な機能の概要: Web デザインにおいて、画像表示は重要なリンクであり、画像結合表示はページの読み込み速度を向上させ、ユーザー エクスペリエンスを向上させるための一般的な手法の 1 つです。この記事では、HTML、CSS、jQuery を使用して画像の結合と表示の高度な機能を実装する方法と、具体的なコード例を紹介します。 1. HTML レイアウト: まず、結合された画像を表示するコンテナを HTML で作成する必要があります。ディを使用できます

See all articles