<!--index.wxml-->
<view class="splice-page">
    <canvas id="tempCanvas" type="2d" style="position:absolute;left:-999999px"></canvas>
    <view class="saveButton">
        <test class="icon-upload " bindtap="chooseImags">上传</test>
        <text class="icon-save" bindtap="saveImgToPhone"></text>
    </view>
    <view class="header">
        <view class="upload_img photoframe" >
            <image class="frame" mode="widthFix" src="{{frameSrc}}"></image>
            <image class="photo" src="{{imgSrc}}" disableScroll="true" style="width:{{imgWidth}}px;height:{{imgHeight}}px"></image>
        </view>
        <image src="{{canvasImageSrc}}" style="z-index: 3;"/>
    </view>
</view>

// index.js
// 获取应用实例
const app = getApp()


Page({
  ctx: null,
  canvasNode: null,
  dpr: 1,
  phoneInfo: null,
  data: {
    frameSrc: "https://scpic.chinaz.net/files/pic/pic9/201612/fpic9590.jpg",
    imgSrc: "",
    imgWidth: 0,
    imgHeight: 0,
    ImgObj:null,
    frameObj: null,
    canvasImageSrc: null
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onReady() {
    this.phoneInfo = wx.getSystemInfoSync()
    const query = wx.createSelectorQuery().in(this);
    query
      .select("#tempCanvas")
      .fields({
        node: true,
        size: true,
      })
      .exec((res) => {
        this.canvasNode = res[0].node;
        this.ctx = this.canvasNode.getContext("2d");
        this.dpr = this.phoneInfo.pixelRatio;
        this.canvasNode.width = 230 * this.dpr;
        this.canvasNode.height = 280 * this.dpr;
        this.ctx.scale(this.dpr, this.dpr);
      });
  },
  onLoad() {


  },
  async chooseImags() {
    const data = await wx.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
    })
    console.log(data);
    const ImgObj = await wx.getImageInfo({
      src: data.tempFilePaths[0],
    })
    this.setData({
      imgSrc: ImgObj.path,
      imgWidth: ImgObj.width,
      imgHeight: ImgObj.height
    })
    console.log(ImgObj);
    console.log(this.data.frameSrc);
    const frameObj = await wx.getImageInfo({
      src: this.data.frameSrc
    })
    console.log(frameObj);


    this.setData({
      ImgObj,
      frameObj
    })


  },
  saveImgToPhone() {
    const t = this;
    const i = this.ctx;
    const c = this.canvasNode;
    wx.showLoading({
      title: "生成中",
    });
    let {ImgObj, frameObj} = this.data
    let _offsetX = Math.abs((frameObj.width - ImgObj.width) / 2);
    let _offsetY = Math.abs((frameObj.height - ImgObj.height) / 2);
    let _width = Math.max(ImgObj.width, frameObj.width);
    let _height = Math.max(ImgObj.height, frameObj.height);
    let framImgEl = c.createImage();
    console.log("framImgEl start", framImgEl);
    framImgEl.onload = () => {
      i.drawImage(
        framImgEl,
        0,
        0,
        230,
        280,
      );
    };
    framImgEl.onerror = (e) => {
      console.log("framImgEl err", framImgEl, e);
    }
    framImgEl.src = frameObj.path;


    let imgEl = c.createImage();
    console.log("imgEl start", imgEl);
    imgEl.onerror = (e) => {
      console.log("imgEl err", imgEl, e);
    }
    console.log("imgEl create", imgEl);
    imgEl.onload = () => {
      console.log("imgEl", imgEl);
      i.drawImage(
        imgEl,
        20,
        20,
        230 - 40,
        280 - 40
      );
    };
    imgEl.src = ImgObj.path;
    setTimeout(() => {
      t.getTemFile({
        width: _width,
        height: _height
      })
    }, 800)
  },
  getTemFile(options) {
    console.log("getTemFile 触发", options);
    let t = this;
    let c = this.canvasNode;
    wx.canvasToTempFilePath({
        canvas: t.canvasNode,
      })
      .then((res) => {
        console.log("getTemFile success", res);
        t.setData({
          canvasImageSrc: res.tempFilePath,
        })
        wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
          })
          .then((_res) => {
            wx.hideLoading()
            console.log(" _res", _res);
          })
          .catch((err) => {
            console.log("err", err);
          })
      })
      .catch((err) => {
        console.log("getTemFile err", err);
      });
  },
})
/**index.wxss**/
/* pages/slicePhoto/slicePhoto.wxss */
.splice-page {
  height: 100%;
  overflow: hidden;
  background-color: #f1f1f1;
  padding-top: 100rpx;
}
.saveButton {
  position: absolute;
  top: 30rpx;
  right: 40rpx;
  padding: 10rpx;
  font-size: 0;
  opacity: 0.7;
  z-index: 5;
  display: flex;
  align-items: center;
}
.icon-upload {
  font-size: 34rpx;
  display: inline-block;
  margin-right: 20rpx;
}



/* 保存图片按钮 */
.icon-save {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Esave%3C/title%3E %3Cpath d='M21.7 7.3l-5-5c-0.2-0.2-0.4-0.3-0.7-0.3h-11c-1.7 0-3 1.3-3 3v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-11c0-0.3-0.1-0.5-0.3-0.7zM16 20h-8v-6h8v6zM20 19c0 0.6-0.4 1-1 1h-1v-7c0-0.6-0.4-1-1-1h-10c-0.6 0-1 0.4-1 1v7h-1c-0.6 0-1-0.4-1-1v-14c0-0.6 0.4-1 1-1h1v4c0 0.6 0.4 1 1 1h8c0.6 0 1-0.4 1-1s-0.4-1-1-1h-7v-3h7.6l4.4 4.4v10.6z'%3E%3C/path%3E %3C/svg%3E");
  background-size: cover;
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
}
.saveButton:active .icon-save:active {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Esave%3C/title%3E %3Cpath d='M21.7 7.3l-5-5c-0.2-0.2-0.4-0.3-0.7-0.3h-11c-1.7 0-3 1.3-3 3v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-11c0-0.3-0.1-0.5-0.3-0.7zM16 20h-8v-6h8v6zM20 19c0 0.6-0.4 1-1 1h-1v-7c0-0.6-0.4-1-1-1h-10c-0.6 0-1 0.4-1 1v7h-1c-0.6 0-1-0.4-1-1v-14c0-0.6 0.4-1 1-1h1v4c0 0.6 0.4 1 1 1h8c0.6 0 1-0.4 1-1s-0.4-1-1-1h-7v-3h7.6l4.4 4.4v10.6z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
}
.saveButton:active .icon-upload {
  color: blueviolet;
}
/* 相框区域 */
.header {
  margin-top: 40rpx;
  height: 100%;
display: flex;
  justify-content: center;
}


.header .upload_img {
  width:100%;
  min-height: 300px;
display: flex;
border-radius: 10rpx;
  align-items: center;
  background-color: #ffffff;
  justify-content: center;
}
.photoframe {
  position: absolute;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}


.photoframe .photo {
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 100%;
}
.photoframe .frame {
  position: absolute;
  z-index: 2;
  width: 100%;
  margin: 0;
}


@-webkit-keyframes animation {
  0% {
      bottom: -900rpx;
  }


  100% {
      bottom: 0;
  }
}


@keyframes animation {
  0% {
      bottom: -900rpx;
  }


  100% {
      bottom: 0;
  }
}



.swiper-content {
  position: fixed;
  bottom: 20rpx;
  margin-top: 20rpx;
  width: 100%;
  height: 200rpx;
  overflow: hidden;
  white-space: nowrap;
  background-color: #ffffff;
  padding: 20rpx 0;
}


.frameBox {
  width: 200rpx;
  height: 180rpx;
  display: inline-block;
  margin-right: 20rpx;
}


.frameBox .frameBox-image {
  width: 100%;
  height: 100%;
}