Fabricjs：使用angle属性裁剪图像

Question

我通过对象方法 toDataURL （不是画布）裁剪图像，其中包括诸如left，top，width和height之类的参数。它很棒，但我不知道 知道当图像的角度属性不等于0时我该怎么办？ 我试着打电话给 setAngle = 0 - ＆gt; setCoords（） - ＆gt; toDataURL（）恢复角度＆lt; - 它工作但不太好，我认为这个工作流程并不好。

class Sync:
    def do(self):
        reservations = Reservation.objects.filter(is_synced=False)
        for reservation in reservations:
            serializer = ReservationPKSerializer(reservation)
            dictionary = {'url': 'url', 'hash': 'hash', 'json': serializer.data}
            encoded_data = json.dumps(dictionary)
            r = requests.post('http://gservice.ca29983.tmweb.ru/gdocs/do.php', headers={'Content-Type': 'application/json'}, data=encoded_data)
            if r.status_code == 200:
                reservation.is_synced = True
                reservation.save()

Answer 1

我的解决方案：

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