裁剪图像绘制到canvas与JCrop

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

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

这是我的完整HTML代码。

         $(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(cw) > 0) { // Show image preview var imageObj = $("#target")[0]; var canvas = $("#preview")[0]; var context = canvas.getContext("2d"); if (imageObj != null && cx != 0 && cy != 0 && cw != 0 && ch != 0) { context.drawImage(imageObj, cx, cy, cw, ch, 0, 0, canvas.width, canvas.height); } } }; });        

我究竟做错了什么？

谢谢…

Answer 1

http://jsfiddle.net/wr2er0Lj/

你设置Jcrop不正确，试试吧。