微信什么小程序可以改手机截图

微信截屏，微信小程序截屏调用教程

一、程序简介：

本程序主要是用户1通过在相机上涂鸦来描绘物体的轮廓。然后，用户2根据轮廓寻找物体。如果成功则返回正确，否则返回继续努力。（具体开发流程和功能见微信小程序应用开发计划表。）

二、开发平台

微信开发者工具V1.02.1803210

三、进展

目前小程序的截图功能已经实现。后台识别也已经实现，同时正在完善数据库。

四、思路

想法一：

通过定位API获取用户位置，加上重力加速度或者罗盘来模拟实现。但想法一在实现的时候遇到如下问题被舍弃：

1）获取位置时使用误差不确定。（获取五次位置的平均值误差依然无法确定）

2）如果物体进行移动或同类物体无法识别。

想法二：

通过截取前后两个场景中包围轨迹的最大矩形，传输到后端进行识别。最后由后台返回结果

截屏实现大致过程：记录下用户的最大最小X、Y坐标->调用相机组件的takePhoto控件—>调用画布组件drawImage绘制图像到画布->根据最大最小X、Y坐标调用画布的canvasToTempFilePath导出图像。

遇到问题以及解决方案：

1. 在调用小程序的位置API时，发现获取5次平均值是0

原因：小程序的API有些是多线程的，因此在API后面的语句不一定后执行。

2. 画板无法覆盖到相机组件上：

原因：相机组件是源生组件，在上面只能覆盖cover-view和cover-image组件。

解决方法：画板也为源生组件，虽然按理来说可以覆盖。但是在页面首次加载中，相机会在画板的上面。第二次加载时，画布才可以覆盖到相机组建上面。因此，在开始界面调用一次相机，在第二界面就可以在上面覆盖画布了。

3. 在画布上调用drawImage绘制照片的部分图像时有问题。

原因：没找到

解决方案：将整张图绘制到画布中进行部分截取，这个在IOS系统中是可以的。在Android系统有问题。

4. 画布中导出图像中没有darwImage在画布上绘制的图。

原因：drawImage绘图需要时间。

解决方案：设置一个两秒的定时器。

5. 截图功能在安卓上可以运行，在IOS上无法点击

原因：微信在两个平台上采用的是不同的运行环境。在安卓上cover控件在画板上面，IOS中cover控件在画板下面。

解决方案：在相机控件的下方添加控件，同时调用drawImage时画板坐标乘上一个比例。（其画板坐标单位是像素）

6. 在API内用this指针发现无法给Page中数据赋值

原因：在部分API中，this指针可能不指向页面实例。

解决方法：先用that把this指针的值保存起来，在API内部用that。

7. 在函数中给page中的字符串和对象赋值时跳出函数范围，其值变为空

原因：这应该和程序执行的内存机制有关

解决方法：在给变量申请一个空间，如 str：new string（）。之后赋值时问题便会解决。

8. 画板的drawImage绘制图形问题

原因：经过测试drawImage中的单位确实是像素。不过手机的像素为360*560，照片的像素却为720*1136。

解决方案：无

9. 程序的涂鸦和识别分为两个窗口后。识别窗口会显示轨迹，但背景却是黑色。

原因：不明

解决方案：在识别窗口第一次调用drawImage时，现调用一下clearfill（）清空画布。

10. 记录轨迹

原因：前期我们是用点来描述用户的轨迹的，具体见边框绘制。但这样绘制出的点我们感觉贴的图不美观，之后想要改为用户自己绘制的轨迹

解决方案：在用户点击完成后先把用户的轨迹导入成一张透明图片，传入识别界面。然后贴在画板上。

组件说明：

picker：

滚动选择器，现支持三种选择器，通过mode属性来区分，分别是普通选择器(mode = selector)，时间选择器(mode = time)，日期选择器(mode = date)，默认是普通选择器。

1.默认显示封面；

2.一个视频播放的时候，其他视频停止播放，并显示封面。

1.通过wx:if判断当前视频是否是播放的状态，如果是就显示视频，如果不是就隐藏视频；

2.点击封面的时候，获取到该视频的id，进行判断，如果当前没有视频播放，就把该视频设置为播放的状态；如果当前有视频播放，则停止当前播放的视频，再播放你点击的这个视频。

<view class="video_body">

            <view wx:for="{{courseList}}" wx:for-item="course" class='course-pannle-item' wx:for-index="idx" wx:key="index">

                <view class='video-item'>

                    <video class="video" wx:if='{{idx==playIndex}}' id='video{{idx}}' autoplay='{{true}}' show-center-play-btn="{{false}}" src='{{course.videoUrl}}' controls="true" objectFit="cover"></video>

                    <image class='video-cover video' wx:if='{{idx!=playIndex}}' mode='widthFix' src='{{course.coverUrl}}'></image>

                    <image class='video-play-btn' wx:if='{{idx!=playIndex}}' mode='widthFix' data-index='{{idx}}' bindtap='videoPlay' src='/images/home/btn.png'></image>

                    <!-- <text wx:if='{{idx!=playIndex}}' class='video-duration fs-28'>

                            {{course.duration}}

                        </text>-->

                </view>

            </view>

        </view>

 data: {

    playIndex: null, //用于记录当前播放的视频的索引值

    courseList: [

      {

        videoUrl: 'https://fxmv3-asset.oss-cn-zhangjiakou.aliyuncs.com/132a004191990de6d1dde6379a56987b.mp4', //视频路径

        coverUrl: '/images/home/1.png', //视频封面图

        duration: '03:00' //视频时长

      },

      {

        videoUrl: 'https://fxmv3-asset.oss-cn-zhangjiakou.aliyuncs.com/bddfba680554409e47aeb653ec5d58af.mp4',

        coverUrl: '/images/home/2.png',

        duration: '04:45'

      }

    ]

  },

 videoPlay: function (e) {

      var curIdx = e.currentTarget.dataset.index

      // 没有播放时播放视频

    if (!this.data.playIndex) {

         this.setData({

           playIndex: curIdx

        })

       var videoContext = wx.createVideoContext('video' + curIdx)//这里对应的视频id

     videoContext.play()

   } else {

       // 有播放时先将prev暂停，再播放当前点击的current

      var videoContextPrev = wx.createVideoContext('video' + this.data.playIndex)

       if (this.data.playIndex != curIdx) {

        videoContextPrev.pause()

       }

        this.setData({

         playIndex: curIdx

         })

       var videoContextCurrent = wx.createVideoContext('video' + curIdx)

       videoContextCurrent.play()

     }

    },

---