Gif 动画转 WebP 动画

注意，该功能已经下架。

下架原因：没有适用场景，使用量少。

实现原理：将要转换的 Gif 动画上传到服务器，使用 google WebP 工具进行转换，将转换后的文件下载到本地。

wxml 文件

<page-meta root-font-size="system" />
<view class="page">
  <view class="page__hd">
    <view class="page__title">GIF转成WebP</view>
    <view class="page__desc">可将GIF图片转换为WebP动画，用于Web项目。</view>
  </view>
  <view class="page__bd">
    <view class="weui-cells  weui-cells_radio">
      <view class="weui-cell weui-cell_uploader">
        <view class="weui-cell__bd">
          <view class="weui-uploader">
            <view class="weui-uploader__hd">
              <view aria-role="option" class="weui-uploader__overview">
                <view class="weui-uploader__title">图片信息</view>

              </view>
              <view class="weui-uploader__tips">
                请选取2M内的GIF图片，目前仅支持一张
              </view>
            </view>
            <view class="weui-uploader__bd">
              <view class="weui-uploader__files" id="uploaderFiles">
                <block wx:for="{{files}}" wx:key="*this">
                  <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                    <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
                  </view>
                </block>
              </view>
              <view class="weui-uploader__input-box">
                <view aria-role="button" aria-label="选择图片" class="weui-uploader__input" bindtap="chooseImage"></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="weui-cell">
        <view wx:if="{{headImageExist}}">
          <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit" src="{{headImage}}" bindtap="previewMakeImage"></image>
        </view>
        <view wx:else><text>转换完成的图片会展示在这里</text></view>
      </view>

      <view class="weui-cell">
        <view class="button-sp-area">
          <view class="weui-btn  weui-btn_primary weui-wa-hotarea" aria-role="button" bindtap="imageConvert">开始转换</view>
          <view class="weui-btn  weui-btn_warn weui-wa-hotarea" aria-role="button" bindtap="saveToPhotosAlbum">保存到相册</view>
        </view>
      </view>
    </view>
  </view>
</view>

wxss 文件

.button-sp-area {
	padding: 8rpx;
	text-align: justify;
	margin-top: 8rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-evenly;
  }

js 文件

const utils = require('../../utils/utils.js')
const ohttp = require("../../utils/ostrichHttp")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    files: [],
    headImageExist: false,
    headImage: '',
  },

  chooseImage() {
    const that = this;
    wx.chooseMedia({
      sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
      mediaType: ['image'],
      count: 1,
      success(res) {
        // 检查第一张图片大小
        var tempFiles = res.tempFiles;
        var tempFileSize = tempFiles[0].size;
        if (tempFileSize <= 2048000) {
          let myfiles = [];
          myfiles.push(tempFiles[0].tempFilePath);
          that.setData({
            files: myfiles,
          });

        } else {
          wx.showToast({
            title: '图片超过2M',
          })
        }

      },
    });
  },
  previewImage(e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.files, // 需要预览的图片http链接列表
    });
  },
  previewMakeImage(e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: [this.data.headImage], // 需要预览的图片http链接列表
    });
  },

  async imageConvert() {
    const that = this;
    if (utils.isEmpty(that.data.files)) {
      wx.showToast({
        title: '请先选择图片',
      })
      return
    }

    let filename = that.data.files[0]
    let lbt = utils.getExtension(filename)
    if (lbt != ".gif") {
      wx.showToast({
        title: '图片格式错误',
      })
      return
    }

    wx.showLoading({
      title: '制作中...',
      mask: true,
    })
    let headImage = '';
    const headRes = await ohttp.uploadOneImage('/upload', that.data.files[0], {
      'storageType': 1
    })
    if (headRes.code == 1) {
      headImage = headRes.data.fileName
    } else {
      console.log('调试1')
      wx.hideLoading({
        success: (res) => { },
      })
      wx.showToast({
        title: '制作失败',
      })
      return
    }
    console.log(headImage);
    let msgContent = {
      fileName: headImage,
    }

    const makeResult = await ohttp.httpPost('/g2w', msgContent)
    console.log('调试，',makeResult)
    if (makeResult.data.code == 1) {
      let headImage = await ohttp.httpDownloadFile('/images', makeResult.data.data)

      that.setData({
        headImageExist: true,
        headImage: headImage.tempFilePath,
      })
      wx.hideLoading({
        success: (res) => { },
      })
      wx.showToast({
        title: '制作成功',
      })
    } else {
      console.log('调试2')
      wx.hideLoading({
        success: (res) => { },
      })
      wx.showToast({
        title: '制作失败',
      })
      return
    }

  },


  saveToPhotosAlbum: function () {
    const that = this;
    if (utils.isEmpty(that.data.headImage)) {
      wx.showToast({
        title: '请先转换图片',
      })
      return
    }
    wx.saveImageToPhotosAlbum({
      filePath: that.data.headImage,
      success(res) {
        wx.showToast({
          title: '保存成功',
        })
      },
      fail(err) {
        console.log(err)
        wx.showToast({
          title: '请打开相册权限',
        })
      }
    })
  },

})