思路：

（1）排版：使用弹性布局，将页面排列出来，再用v-for循环出来

（2）在最大的盒子加overflow-x: scroll; 达到左右滑动

（3）使用定位（子绝父相）让文字显示在图片上面

源码如下：

<template>
	<view>
		<!-- 挑战活动版块 -->
		<view class="examine">
			<view class="examine-item" v-for="(item,index) in examinelist">
				<view class="examine-plan">
					<image :src="item.image" mode="widthFix"></image>
					<image :src="item.src" class="img" mode="widthFix"></image>
					<view class="title">请输入你的名字</view>
					<view class="start-time">请输入开始时间</view>
					<view class="end-time">请输入结束时间</view>
					<view class="examine-time">
						<view class="item">
							<view class="item-num">40</view>
							<view class="item-min">min</view>
						</view>
						<view class="item-day">day 01</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				examinelist: [{
						image: '/static/home/motion4.jpg',
						src: '/static/home/3.png'
					},
					{
						image: '/static/home/motion5.jpg',
						src: '/static/home/2.png'
					},
					{
						image: '/static/home/motion6.jpg',
						src: '/static/home/3.png'
					}
				],
			}
		},
		methods: {



		}
	}
</script>
<style lang="scss">
	.examine {
		overflow-x: scroll; //左右滑动
		padding: 20upx;
		display: flex;
		width: 95%;
		margin: 30upx auto;
		.examine-item {
			position: relative; //父盒子，相对定位
			display: flex;
			width: 256upx;
			height: 383upx;
			border-radius: 20upx;
			margin-right: 50upx;
			.examine-plan {
				position: relative;
				width: 256upx;
				height: 383upx;
				border-radius: 20upx;
				.img {
					width: 80upx;
					position: absolute; 
					top: -20upx;
					left: 30upx;
				}
				.title {//子盒子
					position: absolute; //子盒子，绝对定位
					top: 95upx; //顶部与父盒子的距离
					left: 20upx; //左边与父盒子的距离
					font-size: 28upx;
					color: #FFFFFF;
				}
				.start-time {
					position: absolute;
					top: 156upx;
					left: 20upx;
					font-size: 22upx;
					color: #FFFFFF;
				}
				.end-time {
					position: absolute;
					top: 200upx;
					left: 20upx;
					font-size: 22upx;
					color: #FFFFFF;
				}
				.examine-time {
					position: absolute;
					bottom: 40upx;
					left: 20upx;
					display: flex;
					width: 90%;
					margin: auto;
					justify-content: space-between; //子盒子左右排列
					align-items: flex-end; //指最后一个子盒子
					.item {
						display: flex;
						align-items: flex-end;
						.item-num {
							font-size: 40upx;
							color: #FFFFFF;
						}
						.item-min {
							font-size: 20upx;
							color: #FFFFFF;
							vertical-align: bottom; //文字底部与父盒子底部对齐
						}
					}
					.item-day {
						font-size: 20upx;
						color: #FFFFFF;
						vertical-align: bottom;
					}
				}
				image {
					width: 256upx;
					height: 383upx;
					border-radius: 20upx;
				}
			}
		}
	}
</style>

效果展示：

（左右滑动） 

在日常工作、学习中，经常会碰到需要将图片分享给他人的情况，而为了能让对方快速理解图片表达的信息，往往会借助一些工具在图片上添加文字进行注释。

是不是还有许多小伙伴不知道可以图片编辑修改文字app有哪些呢？接下来我会分享3款常用的app，有需要的小伙伴可以接着往下看！

【使用工具一】：微信

微信已然成为我们主要的社交app之一，也有不少小伙伴会在朋友圈中分享自己的日常点滴吧？而在图文发布之前，我们可以使用里面一些图片编辑工具，实现图片文字添加。它的操作蛮简单的，选择图片后点击“预览”，即可进入编辑页面，在这可对图片进行涂鸦、添加表情/文字、裁剪大小、打马赛克，虽然功能不多但还是够用的。

 【使用工具二】：相册

随着科技不断发展，智能手机的功能也越来越齐全，无需借助其它工具即可实现朗读页面文字、提取音频等，以及本次讲到的编辑图片文字。它内置了一些基本的图片编辑功能，像是添加滤镜/文字、校正图片位置等，甚至能将live图转为视频，是不是很神奇呢？你们赶紧研究一下手中的手机能不能实现这些操作吧！

 【使用工具三】：无痕去水印

我常常用这款工具进行图片/视频编辑，因为它具备丰富多样的功能，例如自定义书单文本、直播提词器、视频倒放、图片编辑等，一个软件就能满足我们多样化的需求。

我们可以使用该工具的图片编辑功能，实现图片编辑文字操作。它里面配备了多种字体样式、花字、素材供大家选择，通过各种参数的调整，打造具有个性化的字体，使图片更吸引眼球。

 前阵子我无意间发现，该工具居然还拥有PC端，适合习惯用电脑编辑图片/视频的小伙伴，同样拥有图片编辑、视频剪裁等功能！

相信大家通过我以上的介绍，已经了解可以图片编辑修改文字app有哪些了吧？如果觉得我的分享对你有所帮助的话，可以给我点个“赞”嘛。

原博主：点击查看

需求： 微信小程序，上传图片，成功后图片有水印，既图片的网络地址也有水印。
上传图片使用uni-app的uni.chooseImage（）方法，水印是用canvas。

以下代码可以直接使用：（注意：如果遇到canvas无效或者图片不显示问题：可能就是你在自定义组件内使用canvas，但是没有传递第二个参数this导致的，详见已知问题和解决办法）

<template>
  <view class="content">
    <view v-for="(photo,index) in photoData" :key="index" class="photo">
      <image :src="photo" @click="previewPhoto(photo,photoData)"></image>
      <view class="closeA" @tap="deletePhoto(index)">&times;</view>
    </view>
    <view class="btnAddPhoto" @click="btnAddPhoto">+</view>
    <!-- 获取有水印的图片过程 必须使canvas显示 获取完成后在隐藏掉canvas 配合canvas样式定位 使其错位 -->
    <!-- canvas的隐藏 在小程序中 使用 v-if或display：none 都不生效   使用hidden属性 true隐藏 false显示 -->
    <canvas :style="{width:canvasWidth,height:canvasHeight}" canvas-id="myCanvas" :hidden='flagC'></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flagC: false,
      photoData: [],
      photoArray: [],
      canvasWidth: '',
      canvasHeight: '',
      photoIndex: 0
    }
  },
  onLoad() {
  },
  methods: {
    // 添加图片事件
    btnAddPhoto() {
      this.photoIndex = 0;
      let ctx = uni.createCanvasContext('myCanvas');
      uni.chooseImage({
        count: 6,
        sourceType: ['album', 'camera'],
        success: res => {
          this.photoArray = res.tempFilePaths;
          uni.showLoading({
            title: "图片加载中..."
          })
          this.callAddWaterMart();
        }
      })
    },

    // 调用添加水印的函数
    callAddWaterMart() {
      this.addWaterMark(() => {
        if (this.photoIndex < this.photoArray.length - 1) {
          this.photoIndex++;
          this.callAddWaterMart()
        } else {
          uni.hideLoading()
        }
      })
    },

    // 添加水印
    addWaterMark(callback) {
      this.flagC = false
      uni.getImageInfo({
        // 注意此时的地址是正常的图片地址 以下是给图片添加水印返回新的url地址
        src: this.photoArray[this.photoIndex],
        success: res => {
          this.canvasWidth = `${res.width}px`;
          this.canvasHeight = `${res.height}px`;
          var ctx = uni.createCanvasContext('myCanvas');
          // 在自定义组件内 需要传递第二参数 this canvas才生效
          // var ctx = uni.createCanvasContext('myCanvas', this);
          ctx.clearRect(0, 0, res.width, res.height);
          ctx.beginPath();
          ctx.drawImage(this.photoArray[this.photoIndex], 0, 0, res.width, res.height); // 第一个参数是图片 第二、三是图片在画布位置 第四、五是将图片绘制成多大宽高（不写四五就是原图宽高）

          // 为图片添加水印
          ctx.translate(res.width / 2, res.height / 2);
          ctx.rotate(45 * Math.PI / 180);

		  //这部分是水印的大小位置和数量
          let horizontal = res.width / 4;
          let vertical = res.height / 3;
          let fonstsize = res.width / 30;
          for (let i = 0; i <= 2; i++) {
            for (let j = 0; j <= 2; j++) {
              ctx.beginPath();
              ctx.setFontSize(fonstsize);
              ctx.setFillStyle("rgba(255,255,255,0.3)");
              // ctx.fillText("-仅供保险投保使用-", i * horizontal - res.width / 2, j * vertical - res.height / 2);
              ctx.fillText("--仅供保险投保使用--", (i * horizontal - res.width / 2) * 2, j * vertical - res.height / 2, fonstsize*15*2);
            }
          }

          // 开始绘制添加水印的图片并显示在页面中
          ctx.draw(false, () => {
            setTimeout(() => {
              console.log("asdf");
              uni.canvasToTempFilePath({
                canvasId: "myCanvas",
                success: res => {
                  // 注意此时的地址是加了水印的图片地址（直接url输入浏览器也可以查看包含水印）
                  console.log(123,res.tempFilePath)
                  this.flagC = true
                  this.photoData.push(res.tempFilePath);
                  callback();
                }
              })
            // 在自定义组件内 需要传递第二参数 this canvas才生效
           // }, this)
            }, 500)
          });
        }
      })
    },

    // 预览图片
    previewPhoto(url, list) {
      uni.previewImage({
        current: url,
        urls: list.map(item => item)
      })
    },

    // 删除图片
    deletePhoto(index) {
      this.photoArray.splice(index, 1);
      this.photoData.splice(index, 1);
      console.log(this.photoArray)
    }
  }
}
</script>

<style>
.content {
  padding: 20upx;
}
.photo,
.photo image {
  display: inline-block;
  width: 220upx;
  height: 220upx;
}
.btnAddPhoto {
  width: 220upx;
  height: 220upx;
  border: dashed 1px #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50upx;
}
canvas {
  border: solid 1px gray;
  position: absolute;
  left: 5000upx;
}
</style>

未知问题： 小程序模拟器上，上传第一张图片没问题，再次上传第二张图片，会发现第二张图片显示出来的是两张图片的叠加图；但是在真机使用时候，却不会出现也不影响（故没有处理，猜测解决方案：可以再每次上传图片处理水印时候，使用不同的canvas元素，不要使用同一个去做水印）；

已知问题：
1.若canvas图片渲染不出来，也就是uni.createCanvasContext（）方法无效
2.或ctx.draw（）无效，
3.或uni.canvasToTempFilePath（）接口总是失败；
4.或拿不到图片的tempFilePath；以上问题都是一个原因导致

（查看uni-app文档或者微信小程序canvas文档 ，可知原因：1.是需要在template模板里有canvas元素；2.是在自定义组件或者公共组件内，必须传递第二个参数this）。

解决办法就是： createCanvasContext和canvasToTempFilePath两个地方的方法需要传递第二参数this
既

var ctx = uni.createCanvasContext('myCanvas', this);

uni.canvasToTempFilePath({获取图片的内容代码 详见下面}, this)

截图是uni-app的文档：

微信小程序工具 操作上传一张图：

未知问题演示：上传第二张图：（叠加图片问题只会在小程序模拟器中出现，在实际真机使用中不会影响）