搞了1天了没有进展，想做一个根据微信小程序自带ORC插件返回值，根据card_position.pos的值，将这个图片剪裁后保存在本地。

写了一个测试，电脑运行正常，真机测试就返回一个白图（大小是正确裁剪后的大小）。

后来发现是img.onload = function(e){} 电脑调试可以返回

Event {isTrusted: true, type: "load", target: img, currentTarget: img, eventPhase: 2, …}

但是真机就返回 undefined

哪位帮我看看代码有啥问题。另外，如何在js内直接根据position剪裁图片，而不需要在wxml里建立一套<canvas>，是不是建立一个wx.createOffscreenCanvas？这样的代码如何写？

wxml:

<ocr-navigator bind:onSuccess="OcrSuccess" certificateType="idCard" opposite="{{false}}">
  <view class="cameraImg">
    <image src="../../images/uploadIDcard.png"></image>
  </view>
</ocr-navigator>
<canvas type="2d" id="image-cropper-canvas"
  style="position:fixed;width:{{canvas.width}}px;height:{{canvas.height}}px;"></canvas>
<image class="cropimg1" 
    style="width:{{viewImagesLocation.width}}rpx;height:{{viewImagesLocation.height}}rpx;top:{{viewImagesLocation.top}}rpx;left:{{viewImagesLocation.left}}rpx;" 
    src="{{cropedidCardImgUrl}}"/>

身份证返回结果实例

{
	"type": 0,
	"card_position": {
		"pos": {
			"left_top": {
				"x": 1085.625,
				"y": 621.75
			},
			"right_top": {
				"x": 338.125,
				"y": 594.75
			},
			"right_bottom": {
				"x": 303.625,
				"y": 99.75
			},
			"left_bottom": {
				"x": 1189.125,
				"y": 126.75
			}
		},
		"label": []
	},
	"image_width": 1280,
	"image_height": 960,
	"image_path": "http://tmp/wx4418e3e031e551be.o6zAJs-yC5ByIjnyyy09jKDZquXk.dlrc7P7WlhnGb4aca86b078fc2acb5b08e7a0f438943.jpg"
}

JS：

Page({
  data: {
    idCardImgUrl: '',
    cropedidCardImgUrl: '',
    //剪切画板的大小
    canvas: {
      width: 0,
      height: 0
    },
    // 图片定位
    viewImagesLocation: {
      width: 0,
      height: 0,
      top: 0,
      left: 0
    }
  },
  //身份证识别
  OcrSuccess: function (res) {
    var that = this;
    console.log(res);
    var idCardInfo = res.detail
    var cardposition = res.detail.card_position
    that.setData({
      ['formdata.brxm']: idCardInfo.name.text,
      ['formdata.idNumber']: idCardInfo.id.text,
      idCardImgUrl: idCardInfo.image_path
    });
    //按照ORC插件给的识别区域裁剪图片得到身份证图片
    //设置前端画板大小
    that.setData({
      canvas: {
        width: idCardInfo.image_width,
        height: idCardInfo.image_height
      }
    })
    // 画图
    const query = that.createSelectorQuery()
    query.select('#image-cropper-canvas').fields({
      node: true,
      size: true
    }).exec((res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      //原图的宽高和剪裁后的宽高
      let canvasWidth = idCardInfo.image_width
      let canvasHeight = idCardInfo.image_height
      let cropWidth = cardposition.pos.right_top.x - cardposition.pos.left_top.x
      let cropHeight = cardposition.pos.right_bottom.y - cardposition.pos.left_top.y
      // 设置画布宽高
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      //canvas 2d 通过此函数创建一个图片对象
      let img = canvas.createImage();
      img.src = idCardInfo.image_path
      img.onload = (e) => {
        console.log(e)
        ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
        let x = cardposition.pos.left_top.x
        let y = cardposition.pos.left_top.y
        let width = cropWidth
        let height = cropHeight
        //设置裁剪后显示img控件区域
        that.setData({
          viewImagesLocation: {
            width: width,
            height: height,
            top: 0,
            left: 0
          }
        })
        wx.canvasToTempFilePath({
          x: x,
          y: y,
          width: width,
          height: height,
          destWidth: cropWidth,
          destHeight: cropHeight,
          canvas: canvas,
          fileType: 'jpg',
          quality: that.data._quality,
          success(res) {
            console.log(res.tempFilePath)
            that.setData({
              cropedidCardImgUrl: res.tempFilePath
            });
          },
          fail: function (e) {
            console.log(e)
          }
        })
      }
      img.onerror = (e) => {
        console.error('err:', e)
      }
    })
  }
})