微信小程序canvas drawImage（） 图片缩放 移动问题

Question

1.问题描述 我让用户对图片进行缩放移动后，想要将图片保存起来。现在能够显示缩放后的图片，及相关参数，但是再调整到canvas中，发现图片位置有误。
2.相关代码
wxml图片展示相关:

<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>

将相对应参数传给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();
  },

原始缩放移动后的图片

canvas画的图片

望指点 谢谢