Fix cropped image export (#3837)

Fix cropped images not exporting right

<img width="780" alt="image"
src="https://github.com/tldraw/tldraw/assets/15892272/41928af4-f222-4b71-bbcd-90b9df375019">


### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Make an image shape.
2. Crop it.
3. Export it.
4. Check it looks right.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fixed cropped images not exporting properly
This commit is contained in:
Lu Wilson 2024-05-28 10:49:28 +01:00 committed by GitHub
parent 47c8bc0eb3
commit 93cfd250e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -214,7 +214,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
<polygon points={points.map((p) => `${p.x},${p.y}`).join(' ')} />
</clipPath>
</defs>
<g clipPath="url(#{cropClipId})">
<g clipPath={`url(#${cropClipId})`}>
<image href={src} width={width} height={height} style={{ transform }} />
</g>
</>