img-capture

游戏

安装

npm install img-capture

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game": "img-capture/index"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "common-game"
  ]
}

• js

Page({
  data: {
    gameSource: {
      // 不配做fullScaleShow或fullScreen，居中显示图片原本尺寸
      // fullScaleShow: true,//true:开启以长边撑满容器等比显示
      // fullScreen: true,//宽高拉伸撑满容器 优先级高于fullScaleShow
      imgCheckType: "mask",//图片检测区域边界 bg:最小值为背景框 mask:最小值为裁剪框
      moveOps: {
        openMove: true,//开启移动
      },
      // 左上角拖动图标，其他三个角自动旋转显示
      leftIcon: { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01KzU6b61EUdLvHgOhc_!!2185320355.png" },
      mask: {
        openDrag: true,//开启mask区域尺寸拖动
        isScale: true,//保持等比缩放
        minWidth: 10,//最小宽度
        minHeight: 10,//最小高度
        width: 400,//初始宽度
        height: 200,//初始高度
        alpha: 0.5//背景透明度
      },
      scaleOps: {
        imgShowType: "none",//none：自由缩放，single：保持长边最小缩放为撑满容器 double：保持最短边缩放为撑满容器
        openScale: !false, //是否开启缩放,默认false关闭
        scaleLmd: 100, //值越小越灵敏
        scaleRange: { min: 0.01, max: 10 } //缩放范围
      },
    },
  },
  onLoad() { },

  onRef(ref) {
    this.gameComponent = ref;
  },
  onInitDone() {
    // 更新配置数据
    this.gameComponent.onEvent("resetData", {
      mask: {
        openDrag: true,//开启mask区域尺寸拖动
        isScale: true,//保持等比缩放
        minWidth: 10,//最小宽度
        minHeight: 10,//最小高度
        width: 400,//初始宽度
        height: 200,//初始高度
        alpha: 0.9//背景透明度
      }
    })

    this.gameComponent.onEvent("load", {
      // scale: { x: 0.5, y: 0.5 },
      src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01hWEuTv1EUdM8hGA7c_!!2185320355.png",
    })
  },
  async exportFun() {
    // 导出请在手机上预览效果
    /* let base64 = await this.gameComponent.onEvent("getMaskImg", {
      base64: true//true：返回base64路径,false:返回临时路径
    }); */
    let base64 = await this.gameComponent.onEvent("getMaskImg2");
    this.setData({
      imgSrc: base64
    })
  },
  topImgFun() {
    this.gameComponent.onEvent("renderTopImg", {
      src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iMdD9J1FJvfnSBaJW_!!1080040467.png",
      noExport: true,//画布导出图片时，不导出此图
    })
  }
});

• xaml

  <image mode="scaleToFill" class="img" src="{{imgSrc}}" a:if="{{imgSrc}}" />
  <view class="pageBox">
    <view class="btn1" onTap="exportFun">导出图片</view>
    <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" />
  </view>

• acss

.pageBox{
  position: absolute;
  width: 750rpx;
  height: 500rpx;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

  background-color: #ccc;
}
.btn1{
  position: absolute;
  left:0;
  bottom: -100rpx;
}
.img{
  background-color: red;
  width: 400rpx;
  height: 200rpx;
  position: absolute;
  right: 0;
  bottom: 0;
}