11 908
edições
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 98: | Linha 98: | ||
slider(); | slider(); | ||
const img = document.getElementById('source-image'); | |||
const canvas = document.getElementById('canvas'); | |||
const ctx = canvas.getContext('2d'); | |||
img.onload = function() { | |||
// Desenhar a imagem no canvas para análise | |||
canvas.width = img.width; | |||
canvas.height = img.height; | |||
ctx.drawImage(img, 0, 0); | |||
const imageData = ctx.getImageData(0, 0, img.width, img.height); | |||
const pixels = imageData.data; | |||
let top = img.height, left = img.width, right = 0, bottom = 0; | |||
// Iterar pelos pixels para encontrar bordas do conteúdo | |||
for (let y = 0; y < img.height; y++) { | |||
for (let x = 0; x < img.width; x++) { | |||
const i = (y * img.width + x) * 4; | |||
const alpha = pixels[i + 3]; | |||
if (alpha > 0) { // Pixel não é transparente | |||
if (x < left) left = x; | |||
if (x > right) right = x; | |||
if (y < top) top = y; | |||
if (y > bottom) bottom = y; | |||
} | |||
} | |||
} | |||
// Calcular a largura e altura do conteúdo visível | |||
const width = right - left; | |||
const height = bottom - top; | |||
// Redimensionar o canvas e redesenhar o conteúdo cortado | |||
canvas.width = width; | |||
canvas.height = height; | |||
ctx.clearRect(0, 0, canvas.width, canvas.height); | |||
ctx.drawImage(img, left, top, width, height, 0, 0, width, height); | |||
}; | |||