canvas drawImage() 方法绘制图片与视频

快来打我* 2022-04-16 00:09 550阅读 0赞

**目录**

canvas drawImage() 方法

编码示例

context.drawImage(img,x,y)

context.drawImage(img,x,y,width,height)

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

获取画布以及 Image 尺寸

画布上叠加绘制

画布上实时渲染动画

--------------------

《[ HTML 5 Canvas 绘制图形图像][HTML 5 Canvas]》

注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。

# canvas drawImage() 方法 #

drawImage() 方法用于在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

**JavaScript 语法 1**：在画布上定位图像—> *context*.drawImage(*img*,*x*,*y*);

**JavaScript 语法 2：**在画布上定位图像，并规定图像的宽度和高度—> *context*.drawImage(*img*,*x*,*y*,*width*,*height*);

**JavaScript 语法 3：**剪切图像，并在画布上定位被剪切的部分—> *context*.drawImage(*img*,*sx*,*sy*,*swidth*,*sheight*,*x*,*y*,*width*,*height*);

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>img</em></td> 
   <td>规定要使用的图像、画布或视频。</td> 
  </tr> 
  <tr> 
   <td><em>sx</em></td> 
   <td>可选。图片开始剪切的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>sy</em></td> 
   <td>可选。图片开始剪切的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>swidth</em></td> 
   <td>可选。被剪切图像的宽度。</td> 
  </tr> 
  <tr> 
   <td><em>sheight</em></td> 
   <td>可选。被剪切图像的高度。</td> 
  </tr> 
  <tr> 
   <td><em>x</em></td> 
   <td>在画布上放置图像的 x 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>y</em></td> 
   <td>在画布上放置图像的 y 坐标位置。</td> 
  </tr> 
  <tr> 
   <td><em>width</em></td> 
   <td>可选。要使用的图像的宽度。（伸展或缩小图像）</td> 
  </tr> 
  <tr> 
   <td><em>height</em></td> 
   <td>可选。要使用的图像的高度。（伸展或缩小图像）</td> 
  </tr> 
 </tbody> 
</table>

注意事项：

在画布上绘制图片时，因为图片资源时动态加载的，所以必须要在图片加载完成后，才在 Canvas 上去渲染；否则如果图片在未加载完成的情况下去 Canvas 上绘制，则不会 有任何效果。

Image 对象有一个 onload时间，当图像装载完毕时调用的事件句柄，可以参考《[HTML DOM Image 对象][HTML DOM Image]》

# 编码示例 #

## *context*.drawImage(*img*,*x*,*y*) ##

x 表示在画布上放置图像的 x 坐标位置，必填

y 表示在画布上放置图像的 y 坐标位置，必填

以画布左上角为原点(0,0)，此时图片将以原尺寸进行绘制。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Cavas 演示</title>
        <style type="text/css">
            canvas {
                margin-left: 150px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
    
            $(function () {
                drawImage1();
                drawImage2();
                drawImage3();
            });
    
            /**
             * 绘制第一张图
             * 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
             * ctx.drawImage(img, 0, 0)
             */
            var drawImage1 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas1");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 0, 0);
                }
            }
    
            /**
             * 绘制第二张图
             * 图片实际大小 75 * 75，Canvas 大小 100 * 100
             * ctx.drawImage(img, 20, 20)
             */
            var drawImage2 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas2");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 20, 20);
                }
            }
    
    
            /**
             * 绘制第三张图
             * 图片实际大小 75 * 75，Canvas 大小 100 * 100
             * ctx.drawImage(img, 40, 40)
             */
            var drawImage3 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas3");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 40, 40);
                }
            }
        </script>
    </head>
    <body>
    <canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    
    <canvas id="myCanvas2" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    
    <canvas id="myCanvas3" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

## *context*.drawImage(*img*,*x*,*y*,*width*,*height*) ##

x 表示在画布上放置图像的 x 坐标位置，必填

y 表示在画布上放置图像的 y 坐标位置，必填

width 表示要使用的图像的宽度，此时将拉伸或缩小图像，可选  
height  表示要使用的图像的高度，此时将拉伸或缩小图像，可选

可以简单的理解成 (x,y) 表示起点坐标，(x+width,y+height) 表示重点坐标，图片以原尺寸进行放大或者缩小。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Cavas 演示</title>
        <style type="text/css">
            canvas {
                margin-left: 150px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
    
            $(function () {
                drawImage1();
                drawImage2();
                drawImage3();
            });
    
            /**
             * 绘制第一张图
             * 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
             * ctx.drawImage(img, 0, 0,75,75)
             */
            var drawImage1 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas1");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 0, 0, 75, 75);
                }
            }
    
            /**
             * 绘制第二张图
             * 图片实际大小 75 * 75，Canvas 大小 100 * 100
             * ctx.drawImage(img, 0, 0, 50, 50);
             */
            var drawImage2 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas2");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 0, 0, 50, 50);
                }
            }
    
            /**
             * 绘制第三张图
             * 图片实际大小 75 * 75，Canvas 大小 100 * 100
             * ctx.drawImage(img, 0, 0, 100, 100);
             */
            var drawImage3 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas3");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 0, 0, 100, 100);
                }
            }
        </script>
    </head>
    <body>
    <canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    
    <canvas id="myCanvas2" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    
    <canvas id="myCanvas3" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

## *context*.drawImage(*img*,*sx*,*sy*,*swidth*,*sheight*,*x*,*y*,*width*,*height*) ##

x 表示在画布上放置图像的 x 坐标位置，必填

y 表示在画布上放置图像的 y 坐标位置，必填

width 表示要使用的图像的宽度，此时将拉伸或缩小图像，可选  
height  表示要使用的图像的高度，此时将拉伸或缩小图像，可选

sx  表示图片开始剪切的 x 坐标位置，可选  
sy  表示图片开始剪切的 y 坐标位置，可选  
swidth 表示被剪切图像的宽度，可选  
sheight  表示被剪切图像的高度，可选

可以简单的理解成：截切图片上的(sx,sy) 到 (sx+swidth,sy+sheight) 区域放置到画布上的 (x,y) 到 (x+width,y+height)区域。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Cavas 演示</title>
        <style type="text/css">
            canvas {
                margin-left: 150px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
    
            $(function () {
                drawImage1();
                drawImage2();
                drawImage3();
            });
    
            /**
             * 绘制第一张图
             * 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
             * ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);
             */
            var drawImage1 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas1");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);
                }
            }
    
            /**
             * 绘制第二张图
             * 图片实际大小 75 * 75，Canvas 大小 100 * 100
             * ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5, 0, 0, 100, 100);
             */
            var drawImage2 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas2");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5, 0, 0, 100, 100);
                }
            }
    
            /**
             * 绘制第三张图
             * 图片实际大小 75 * 75，Canvas 大小 100 * 100
             * ctx.drawImage(img, 20, 20, 30, 30, 0, 0, 50, 50);
             */
            var drawImage3 = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas3");
                /**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
                 * 2d 是目前支持的二维图像*/
                var ctx = canvasObj.getContext("2d");
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染*/
                img.onload = function () {
                    ctx.drawImage(img, 20, 20, 30, 30, 0, 0, 50, 50);
                }
            }
        </script>
    </head>
    <body>
    <canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    
    <canvas id="myCanvas2" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    
    <canvas id="myCanvas3" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2][]

## 获取画布以及 Image 尺寸 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Cavas 演示</title>
        <style type="text/css">
            canvas {
                margin-left: 150px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
    
            $(function () {
                getSize();
            });
    
            /**
             * 获取画布 以及 Image 的尺寸
             * 图片实际大小 75px * 75px，Canvas 大小 100px * 100px
             */
            var getSize = function () {
                /**获取 cavas Dom 对象*/
                var canvasObj = document.getElementById("myCanvas1");
                var ctx = canvasObj.getContext("2d");
                console.log("画布尺寸", canvasObj.width, canvasObj.height);//输出：画布尺寸 100 100
    
                var img = new Image();
                img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                /**等图片资源加载完成后，才在 Canvas 上进行绘制渲染，或其他操作*/
                img.onload = function () {
                    console.log("图片尺寸", img.width, img.height);//输出：图片尺寸 75 75
    
                    /**让图片铺满画布*/
                    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvasObj.width, canvasObj.height);
                }
            }
        </script>
    </head>
    <body>
    <canvas id="myCanvas1" width="100" height="100" style="border:1px solid #000000;">
        浏览器不支持 HTML5 canvas
    </canvas>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3][]

## 画布上叠加绘制 ##

画布 Canvas 相当于一块画板，可以在上面反复的进行绘制，比如画笔画图形，画图片等，可以一层一层的往上面进行绘制，微信小游戏就是通过这样的原理进行渲染的。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>ES6 测试</title>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
            $(function () {
                let canvas = document.getElementById("myCanvas");
                let ctx = canvas.getContext("2d");
                let image = new Image();
                image.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
                image.onload = function () {
                    /**
                     * 连续化三张图
                     */
                    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height / 2);
                    ctx.drawImage(image, 0, 0, image.width, image.height, 0, canvas.height / 2, canvas.width, canvas.height / 2);
                    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width / 2, canvas.height);
                }
            });
        </script>
    </head>
    <body>
    
    <canvas width="400" height="400" style="border: 1px solid red" id="myCanvas">
        浏览器不支持 Canvas
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 4][]

## 画布上实时渲染动画 ##

![20181116182859999.gif][]

实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>直线运动</title>
    
        <style type="text/css">
            .divContent {
                width: 600px;
                height: 150px;
                background-color: #333333;
                margin: 10px auto;
                border-radius: 10px;
            }
        </style>
    
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        <script type="module">
    
            /**第一个动画————————图片尺寸小于画布尺寸
             * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
             * ctx：画布上下文
             * img：加载成功的 Image 对象
             * moveX：图片移动的 x 坐标
             * speed：图片移动的速度(单位像素)
             */
            let moveX = 0;
            let speed = 2;
            let drawRect1 = function (canvas, ctx, img) {
    
                /**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
                 * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
                 * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
                 * */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
    
                /**因为图片尺寸小于画布尺寸，所以 drawImage 时，三个参数就可以搞定
                 * 图片的 x 坐标让它动态变化
                 * 图片的 y 坐标让图片的下边缘刚好与画布下边缘重合
                 */
                ctx.drawImage(img, moveX, canvas.height - img.height);
                moveX += speed;
    
                /**如果图片移动到画布最右侧，则将其 x 左边置0*/
                if (moveX > canvas.width) {
                    moveX = 0;
                }
                /**帧动画中回调自己*/
                requestAnimationFrame(function () {
                    drawRect1(canvas, ctx, img);
                });
            }
    
            /**第一个动画————————图片尺寸大于画布尺寸
             * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
             * ctx：画布上下文
             * img：加载成功的 Image 对象
             * moveLandX：图片移动的 x 坐标
             */
            let moveLandX = 0;
            let drawRect2 = function (canvas, ctx, img) {
    
                /**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
                 * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
                 * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
                 * */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
    
                /**因为图片尺寸大于画布尺寸，所以需要进行裁剪，这里使用9个参数
                 * 同样是让它在画布底部进行运动
                 * 其中关键点是第六个参数 -moveLandX 为负数表示让它从右往左移动
                 * 如果需要向右运动，则第6个参数改为 +moveLandX 即可
                 */
                ctx.drawImage(img, 0, 0,
                        img.width, img.height,
                        -moveLandX, canvas.height - img.height,
                        img.width, img.height);
    
                moveLandX += speed;
                /**这里效果是让图片像陆地一样无止境的进行运动，所以它的画布的右侧要始终保持有图像，不能让它置空
                 * 所以当图片运动到左侧超过了图片刚开始在右侧隐藏的部分时，应该让它重新开始渲染
                 * */
                if (moveLandX > (img.width - canvas.width)) {
                    moveLandX = 0;
                }
    
                /**帧动画中回调自己*/
                requestAnimationFrame(function () {
                    drawRect2(canvas, ctx, img);
                });
            }
    
            $(function () {
                /**获取第一张画布*/
                let canvas1 = document.getElementById("myCanvas1");
                /**获取画布上下文*/
                let ctx1 = canvas1.getContext("2d");
                let img1 = new Image();
                img1.src = "https://www.thymeleaf.org/images/thirdparty/broadleafcommerce_logo.png";
                img1.onload = function () {
                    drawRect1(canvas1, ctx1, img1);
                }
                /**获取第二张画布*/
                let canvas2 = document.getElementById("myCanvas2");
                /**获取画布上下文*/
                let ctx2 = canvas2.getContext("2d");
                let img2 = new Image();
                img2.src = "../images/land.png";
                img2.onload = function () {
                    drawRect2(canvas2, ctx2, img2);
                }
            });
        </script>
    
    </head>
    <body>
    
    <div class="divContent">
        <canvas id="myCanvas1" width="600" height="200">
            浏览器不支持 Canvas
        </canvas>
    </div>
    <br>
    
    <div class="divContent">
        <canvas id="myCanvas2" width="600" height="200">
            浏览器不支持 Canvas
        </canvas>
    </div>
    
    </body>
    </html>

[HTML 5 Canvas]: https://blog.csdn.net/wangmx1993328/article/details/84027238
[HTML DOM Image]: https://blog.csdn.net/wangmx1993328/article/details/84060678
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220416/61f70e98365649ada8114710af519faf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220416/9e68913e217c4adf9b26fe8512ebc143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2]: /images/20220416/8097490e47b4414abc261d26b0b418ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3]: /images/20220416/65caee6c262d4e628a2c03040c30691d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 4]: /images/20220416/63ab5fbe8ff44c51abebc0057abade62.png
[20181116182859999.gif]: /images/20220416/76238607be91489db9c354874bd9b851.png