Recortar imagen dibujada en lienzo con JCrop

Question

Dec 25, 2014, 01:13 PM

Recortar imagen dibujada en lienzo con JCrop

Soy nuevo en HTML5 e intento recortar una imagen con JCrop. No hay problema si quiero recortarlo directamente, pero cuando se dibuja en un lienzo, JCrop no funciona.

Creo que la razón tal vez es que estoy creando una variable de imagen para poder dibujarla en el lienzo de la ventana gráfica y establecer su Id dinámicamente. Entonces Jquery no puede acceder a esa imagen creada dinámicamente. Pero aun así no sé qué hacer.

Aquí está mi código HTML completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>acanimal - Crop image on the client side with JCrop and HTML5 canvas element</title>

        <script src="./js/jquery.min.js" type="text/javascript"></script>
        <script src="./js/jquery.Jcrop.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />

        <script type="text/javascript">

            $(window).load(function () {
                var canvas = document.getElementById('viewport'),
                context = canvas.getContext('2d');

                make_base();

                function make_base() {
                    var base_image = new Image();
                    base_image.id = 'target';
                    base_image.src = 'demo_files/sago.jpg';
                    base_image.onload = function () {
                        context.drawImage(base_image, 0, 0);
                    }
                }

            });

            jQuery(function ($) {

                $('#target').Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    allowSelect: true,
                    allowMove: true,
                    allowResize: true,
                    aspectRatio: 0
                });

                function updatePreview(c) {
                    if (parseInt(c.w) > 0) {
                        // Show image preview
                        var imageObj = $("#target")[0];
                        var canvas = $("#preview")[0];
                        var context = canvas.getContext("2d");

                        if (imageObj != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
                            context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
                        }
                    }
                };
            });

        </script>
    </head>
    <body>
        <canvas id="viewport" width=602; height=500;></canvas>
        <canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>
    </body>
</html>

¿Qué estoy haciendo mal?

Gracias...

,

Deja tu comentario