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.
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.