裁剪一张图 指定宽高 canvas

         // picUrl: 'https://t7.baidu.com/it/u=2458317123,3391822374&fm=193&f=GIF'


 handleClick () {
      this.clipSrcPic(this.picUrl, result => {
        this.newUrl = result
      })
    },
    clipSrcPic (picUrl, cb) {
      //  target:  380 * 242
      //  srcPic: 716 * 1036
      const picObj = new Image()
      picObj.src = picUrl
      picObj.setAttribute('crossOrigin', '')
      picObj.onload = () => {
        const srcNaturalWidth = picObj.naturalWidth
        const srcNaturalHeight = picObj.naturalHeight

        const canvas = document.createElement('canvas')
        console.log('canvas is ...', canvas)
        const ctx = canvas.getContext('2d')
        canvas.width = 380
        canvas.height = 242

        const sLeft = srcNaturalWidth / 2 - (280 / 2)
        const sTop = srcNaturalHeight - 242
        ctx.drawImage(picObj, sLeft, sTop, 380, 242, 0, 0, 380, 242)
        //  document.getElementById('Huipage').appendChild(canvas)
        cb(canvas.toDataURL())
        canvas.remove()
        console.log('canvas is ...', canvas)
      }
    }