WeChat Mini Programs canvas drawImage () picture zooming and moving problem

1. Problem description I asked the user to zoom and move the picture and want to save it. Now can display the zoomed image, and related parameters, but then adjust to the canvas, found that the image position is wrong.
2. Related code
wxml picture display:

<view class="oimg">
    <image src="{{imgUrl}}" class="img"  style="transform:translate({{offsetX}}px, {{offsetY}}px) scale({{scale}});width: {{width}}px; height: {{height}}px; margin-left:-{{width/2}}px;margin-top:-{{height/2}}px"></image>
  </view>

pass the corresponding parameters to canvas

draw() {

    const pc = wx.createCanvasContext("myCanvas");
    pc.clearRect(0, 0, 300, 300);
    pc.translate(this.data.offsetX1 , this.data.offsetY1);
    pc.scale(this.data.scale1, this.data.scale1);
    pc.drawImage(this.bgPic, 0, 0, 300, 300);
 
    pc.draw();
  },

Picture moved by original zooming

canvas

look for advice. Thank you