Cortar imagem, colar imagem e imprimir

1 fazer o colar imagem de outros abas do navegador tipo esse modelo.

https://jsfiddle.net/c0kw5dbu/3/

2 fazer o cortar imagem tipo esse modelo, no final tem uma demostração

https://nyan.im/p/fabric-js-crop-image


estou mandando os arquivos em anexo do meu projeto

tem dois arquivos o
app.jsx
codigo.jsx

crie um projeto novo com reactjs e vite usando

npm create vite
javascript + swc
import o arquivo codigo.jsx
troque o arquivo app.jsx

feito isso vai rodar o projeto que estou mandando, nesse projeto tem 5 botoes
1 botao para criar o canvas
1 botao para colocar um retangulo
1 botao para cortar a imagem
1 botão para imprimir
1 botão que serve para ver as medidas do retangulo


insira a imagem e depois insira o retangulo, coloque o retangulo em cima da imagem e aperte o botão cortar, repare que ele vai cortar a imagem no local que está o retangulo.
Essa parte funciona muito bem, porem se você alterar o tamanho da imagem então o botao cotar var dar um bug.

Esse é o primeiro melhoria, você pode arrumar o codigo mantendo a mesma logica de colocar o retangulo em cima e cortar ou você pode fazer uma logica nova.


A segunda melhoria é ir em outra aba do navegador, fazer uma busca no google de qualquer tipo de imagens por exemplo: mario bros clicar em cima e ir em copiar imagem e depois voltar aqui no projeto e dar um colar(ctrl+v) para ele colocar a imagem no canvas.


Feito esses dois apertar o botão imprimir para ver se vai imprimir a imagem que foi colada.

3 quado você copia a imagem de outros site ele faz um crossorigin e bloqueia o botão imprimir, então teria que arrumar isso ai tambem,.