使用JCrop将图像绘制到画布中 [英] Cropping image drawn into canvas with JCrop
本文介绍了使用JCrop将图像绘制到画布中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚开始使用HTML5并尝试使用JCrop裁剪图片。没有问题，如果我想要直接裁剪它，但当它被绘制到画布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.
我认为原因可能是我创建了一个图像变量，以便能够绘制到视口画布中并动态设置它的Id。所以Jquery无法访问动态创建的图像。
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.
这是我的完整HTML代码。
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>
我做错了什么？
感谢...
推荐答案
您设置为 Jcrop 不正确，尝试一下。
You are set Jcrop not correct, try it.
这篇关于使用JCrop将图像绘制到画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
