Fabricjs: rogner l'image avec l'attribut d'angle

Question

Je recadre une image à l'aide de la méthode d'objet toDataURL (non canvas) avec des paramètres tels que left, top, width et height. Cela fonctionne très bien, mais je ne sais pas savoir ce que je devrais faire quand un attribut d'angle d'image n'est pas égal à 0? Je essayé d'appeler setAngle = 0 ->setcoords() ->toDataURL()angle restauration < - cela fonctionne, mais pas si bien et je pense que ce flux de travail is't bien.

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

Answer 1

Ma solution:

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