Javascript Fabricjs：使用角度属性裁剪图像

我通过对象方法toDataURL（非画布）裁剪图像，并使用诸如left、top、width和height等参数。它工作得很好，但我没有 知道当图像的角度属性不等于0时应该怎么做吗？

---

我试图调用setAngle=0->setCoords（）->toDataURL（）还原角度我的解决方案：

---

你到底想实现什么？我想以一定角度裁剪一幅图像，并基于裁剪创建一个新对象。我是通过您的解决方案中的clipTo（）决定的，由于toDataUrl（），图像质量非常差。是否有任何替代解决方案，其中质量保持不变（与原始图像相同），工作方式与解决方案相同。

cropImage: ->
  sLeft = @glob.data.selectArea.left
  sTop = @glob.data.selectArea.top
  sAngle = @glob.data.selectArea.angle

  @glob.data.selected.setAngle(0)
  @glob.data.selected.setCoords()
  @glob.data.cropPicture.setAngle(0)
  @glob.data.cropPicture.setCoords()

  cropParams = {
    width:  @glob.data.selectArea.getWidth()
    height: @glob.data.selectArea.getHeight()
    left:   @glob.data.selectArea.getLeft() - @glob.data.cropPicture.getLeft()
    top:    @glob.data.selectArea.getTop() - @glob.data.cropPicture.getTop()
  }
  ...
  croppedDataUrl = @glob.data.cropPicture.toDataURL(cropParams)
  fabric.Image.fromURL(croppedDataUrl, (img) =>
    img.left = sLeft
    img.top = sTop
    img.angle = sAngle
    @glob.data.canvas.add(img)
  ...

cropImage: ->
    # origin image
    originWidth  = @glob.cropPicture.getWidth()
    originHeight = @glob.cropPicture.getHeight()
    originLeft   = @glob.cropPicture.left
    originTop    = @glob.cropPicture.top

    # coordinates of the center of origin image
    ctxLeft = - originWidth / 2 + @glob.cropPicture.strokeWidth
    ctxTop = - originHeight / 2 + @glob.cropPicture.strokeWidth

    # crop mask
    width  = @glob.selectArea.getWidth()
    height = @glob.selectArea.getHeight()
    angle  = @glob.selectArea.getAngle()
    left   = @glob.selectArea.left
    top    = @glob.selectArea.top

    cropLeft = left - originLeft
    cropTop = top - originTop

    @glob.cropPicture.clipTo = (ctx) =>
      ctx.save()
      ctx.translate(ctxLeft, ctxTop)
      ctx.rect(cropLeft, cropTop, width, height)
      ctx.restore()

    @glob.cropPicture.angle = 0
    @glob.cropPicture.setCoords()
    cropData = @glob.cropPicture.toDataURL()
    @glob.cropPicture.angle = angle
    @glob.cropPicture.setCoords()

    fabric.Image.fromURL(cropData, (img1) =>
      params = {
        width: width
        height: height
        left: cropLeft
        top: cropTop
      }
      fabric.Image.fromURL(img1.toDataURL(params), (img2) =>
        @glob.canvas.add img2
      )
    )

    @glob.canvas.renderAll()