Cropping image drawn into canvas with JCrop

I'm new to HTML5 and trying to crop an image with JCrop. There is no problem if I want to crop it directly but when it is drawn into a canvas JCrop does not work.

I think the reason maybe that I'm creating an image variable to be able to draw it into viewport canvas and setting it's Id dynamically. So Jquery cannot access that dynamically created image. But even so I don't know what to do.

Here is my full HTML code.

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

What am I doing wrong?

Thanks...

waki

You are set Jcrop not correct, try it.

function make_base() {
  var base_image = new Image();
  base_image.src = 'https://picsum.photos/id/870/700/467';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

function updatePreview(c) {
  if (parseInt(c.w) > 0) {
    // Show image preview
    var imageObj = $("#viewport")[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);
    }
  }
}

var canvas = document.getElementById('viewport'),
  context = canvas.getContext('2d');

make_base();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tapmodo/Jcrop@0.9.12/js/jquery.Jcrop.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/tapmodo/Jcrop@0.9.12/css/jquery.Jcrop.min.css" rel="stylesheet" />

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

View on JSFiddle

来源：https://stackoverflow.com/questions/27647086/cropping-image-drawn-into-canvas-with-jcrop

标签

jquery

html5

canvas

jcrop