Jquery 使用JCrop裁剪绘制到画布中的图像_Jquery_Html_Canvas_Jcrop

Jquery 使用JCrop裁剪绘制到画布中的图像

jquery html canvas

Jquery 使用JCrop裁剪绘制到画布中的图像,jquery,html,canvas,jcrop,Jquery,Html,Canvas,Jcrop,我是HTML5新手，尝试用JCrop裁剪图像。如果我想直接裁剪它没有问题，但是当它被绘制到画布中时，JCrop不起作用我想原因可能是我正在创建一个图像变量，以便能够将其绘制到视口画布中，并动态设置其Id。因此Jquery无法访问动态创建的映像。但即便如此，我也不知道该怎么办这是我的完整HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

我是HTML5新手，尝试用JCrop裁剪图像。如果我想直接裁剪它没有问题，但是当它被绘制到画布中时，JCrop不起作用

我想原因可能是我正在创建一个图像变量，以便能够将其绘制到视口画布中，并动态设置其Id。因此Jquery无法访问动态创建的映像。但即便如此，我也不知道该怎么办

这是我的完整HTML代码

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


acanimal-使用JCrop和HTML5画布元素在客户端裁剪图像
$（窗口）。加载（函数（）{
var canvas=document.getElementById（'viewport'），
context=canvas.getContext（'2d'）；
使_基（）；
函数make_base（）{
var base_image=新图像（）；
base_image.id='target'；
base_image.src='demo_files/sago.jpg'；
base_image.onload=函数（）{
drawImage（基本图像，0,0）；
}
}
});
jQuery（函数（$）{
$（'#target'）.Jcrop({
onChange:updatePreview，
onSelect:updatePreview，
allowSelect：正确，
allowMove:是的，
允许大小：正确，
方面：0
});
函数updatePreview（c）{
如果（parseInt（c.w）>0）{
//显示图像预览
var imageObj=$（“#目标”）[0]；
var canvas=$（“#预览”）[0]；
var context=canvas.getContext（“2d”）；
如果（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、canvas.width、canvas.height）；
}
}
};
});

我做错了什么

谢谢…

您设置了

Jcrop

不正确，请尝试

函数make_base（）{
var base_image=新图像（）；
base_image.src=https://picsum.photos/id/870/700/467';
base_image.onload=函数（）{
drawImage（基本图像，0,0）；
}
}
函数updatePreview（c）{
如果（parseInt（c.w）>0）{
//显示图像预览
var imageObj=$（“#视口”）[0]；
var canvas=$（“#预览”）[0]；
var context=canvas.getContext（“2d”）；
如果（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、canvas.width、canvas.height）；
}
}
}
var canvas=document.getElementById（'viewport'），
context=canvas.getContext（'2d'）；
使_基（）；
$（'#viewport'）.Jcrop({
onChange:updatePreview，
onSelect:updatePreview，
allowSelect：正确，
allowMove:是的，
允许大小：正确，
方面：0
});
非常感谢。在您的代码中，我看到有两点我应该编写canvas的id，而不是image。