• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

116
Vistas
.drawimage() solo muestra la esquina inferior izquierda de una imagen

Estoy tratando de recortar una imagen con Javascript. Tengo croppr.js y está enviando los datos y estaba tratando de recortar la imagen para poder guardarla en un servidor de almacenamiento con Base 64. He leído en línea sobre .drawimage() . Yo he tratado:

 function process(data) { console.log("DATA:" + data) var canvas = document.getElementById("canvas") var context = canvas.getContext('2d'); var imageObj = new Image(); var zoom imageObj.onload = function() { context.width = data.width context.height = data.height // draw cropped image var sourceX = data.x; var sourceY = data.y; var sourceWidth = data.width / 2; var sourceHeight = data.height / 2; var destWidth = sourceWidth; var destHeight = sourceHeight; var destX = 0; var destY = 0; context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); var dataurl = canvas.toDataURL('image/jpeg', 1.0) console.log(dataurl) }; imageObj.src = document.getElementsByTagName("img")[0].src; console.log(imageObj.src) }

data Contiene X Y Height Width Como una matriz JSON.

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Lo primero que veo es:

 context.width = data.width context.height = data.height

¿Querías hacer lienzo en su lugar?

Aquí hay un ejemplo:

 function process(data) { var canvas = document.getElementById("canvas") var context = canvas.getContext('2d'); var img = new Image(); img.onload = function() { canvas.width = data.width canvas.height = data.height // draw cropped image var w = data.width / 2; var h = data.height / 2; context.drawImage(img, data.x, data.y, w, h, 0, 0, w, h); }; img.src = data.src; } process({x:0, y:0, width:600, height: 600, src: "http://i.stack.imgur.com/UFBxY.png"})
 <canvas id="canvas"></canvas>

Ese es el único problema que pude ver en su código.
Lo que no está claro son los datos que usa para llamar a la función de proceso.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda