Editor de imagens

Permite que o usuário recorte, gire, espelhe, desenhe, faça anotações ou aplique filtros em uma imagem que já está no documento, sem sair do editor. Ao clicar em Save, a imagem editada passa pelo seu handler de upload e recebe a nova URL; sem um handler, ela é incorporada como uma data URL PNG.

Ative o recurso

O recurso é o plugin imageeditor.js (também incluído em plugins/all_plugins.js). As ferramentas de edição em si ficam em plugins/tui.image-editor/, que o plugin carrega na caixa de diálogo só quando ela abre, a partir de url_base + "/plugins/tui.image-editor/". Mantenha essa pasta ao lado do plugin ao fazer a implantação.

O botão é imageeditor ("Image Editor"). Ele está na barra de ferramentas de imagem padrão (controltoolbar_IMG), que aparece quando o usuário clica em uma imagem; por isso, não há nada a adicionar à barra de ferramentas principal. Pelo código, selecione a imagem antes e execute editor.execCommand("imageeditor").

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="editor"><p><img src="landscape.png" width="320" alt="Hills under a sun"></p></div>
<script>
// Called on Save with the edited picture: (file, callback(url, error)).
function uploadToServer(file, callback) {
  fetch("/upload", { method: "POST", headers: { "x-file-name": file.name }, body: file })
    .then(function (r) { return r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)); })
    .then(function (data) { callback(data.url); })
    .catch(function (err) { callback(null, err.message); });
}
var editor = new RichTextEditor("#editor", { file_upload_handler: uploadToServer });
</script>

Este é o mesmo handler que o editor usa para imagens inseridas e soltas; consulte Upload de arquivos para ver exemplos completos de servidor.

Opções

O plugin não tem opções próprias. Ele lê estas:

Opção	Padrão	O que faz aqui
file_upload_handler	nenhum	Recebe a imagem editada ao clicar em Save. Se não estiver definido, é usado window.rte_file_upload_handler.
url_base	"/richtexteditor"	De onde plugins/tui.image-editor/ é carregado.
controltoolbar_IMG	inclui imageeditor	Remova imageeditor dela para ocultar o botão.
text_ie_title, text_ie_save, text_ie_saving, text_ie_uploadfailed, text_ie_nourl	Inglês	O título da caixa de diálogo, o botão Save e as mensagens de upload. Os pacotes de idioma os definem.

Como usar

A caixa de diálogo ocupa 90% da janela. As ferramentas na parte de baixo são Undo, Redo, Reset, Delete, Delete all, Crop (Custom, Square, 3:2, 4:3, 5:4, 7:5, 16:9), Flip, Rotate, Draw, Shape, Icon, Text, Mask e Filter. Save fica no canto superior direito; a caixa ao lado mostra os erros de upload.

O que Save faz depende do handler de upload:

• Com um handler. A imagem é passada como um File chamado image-<timestamp>.png com o tipo image/png. Save mostra "Saving..." até você chamar o callback. callback(url) define o src da imagem com essa URL e fecha a caixa de diálogo. callback(null, "File too large") mantém a caixa de diálogo aberta com a edição intacta e mostra "Upload failed: File too large", para que o usuário possa tentar de novo. Um handler que lança uma exceção mostra a mensagem de erro da mesma forma.
• Sem um handler. O src da imagem vira uma URL data:image/png;base64,..., e a caixa de diálogo fecha.

Só o src muda. O width, o alt e os outros atributos da imagem continuam como estavam; assim, uma imagem recortada em 16:9 mantém o antigo atributo width, e a altura acompanha a nova proporção. O HTML salvo no teste acima (o id é adicionado pelo editor a todas as imagens, não por este plugin):

<p><img src="/uploads/image-1793772809490.png" width="320" alt="Hills under a sun" id="rte-fig-cl2s5j0"></p>

O que você precisa saber

• O resultado é sempre PNG. Uma foto JPEG volta como PNG e normalmente fica maior: um JPEG de 640×400 voltou como um PNG de 78 KB no nosso teste. Se o seu servidor só aceita algumas extensões, permita .png.
• Sem um handler, a imagem é incorporada mesmo quando allowBase64Images é false. Na 2.6.12, o editor de imagens não verifica essa configuração. Se você desativou o base64 (consulte Armazenamento de imagens), defina também um handler de upload, ou remova imageeditor de controltoolbar_IMG.
• Imagens de outro site precisam de CORS. A imagem é desenhada em um canvas; por isso, uma imagem de outra origem precisa ser servida com um cabeçalho Access-Control-Allow-Origin. Quando não é, a imagem não aparece na caixa de diálogo, e o Save na 2.6.12 a substitui por um PNG vazio de 300×150. Edite apenas imagens do seu próprio domínio ou de uma CDN que envie cabeçalhos CORS.
• Filtros. Na 2.6.12, a imagem na caixa de diálogo não é redesenhada depois que um filtro é marcado; o filtro é aplicado à imagem salva. Grayscale e Invert saíram corretos no nosso teste; Sepia gerou cores erradas (roxas). Confira o resultado depois de salvar.
• Teclado. A paleta de ferramentas não pode ser totalmente operada pelo teclado. A declaração de acessibilidade lista isso como uma lacuna conhecida.
• Nenhuma requisição externa. Abrir o editor e salvar carregou apenas arquivos de plugins/tui.image-editor/ no próprio host da página; o plugin desativa as estatísticas de uso da biblioteca.

Relacionados: demonstração de edição de imagens, Upload de arquivos, Armazenamento de imagens, Galeria de imagens.