Seahorsepip的答案很棒。我对非后备答案做了很多改进。
我建议您不要做一个奇怪的隐藏png事情，当一个Image对象也可以工作的时候（只要我们不支持后备）。
var jcrop_api;
var canvas;
var context;
var image;
var prefsize;
即使是这样，您最好还是从画布上移出该数据，而仅在最后将其放入该字段中。
function loadImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
image = new Image();
image.src = e.target.result;
validateImage();
}
reader.readAsDataURL(input.files[0]);
}
}
但是，如果您想要的不仅仅是裁剪功能，我们还可以将jcrop附加到插入的画布上（在刷新时将使用jcrop销毁它）。我们可以轻松地完成我们可以使用画布执行的任何操作，然后再次执行validateImage（）并使更新的图像可见。
function validateImage() {
if (canvas != null) {
image = new Image();
image.src = canvas.toDataURL('image/png');
}
if (jcrop_api != null) {
jcrop_api.destroy();
}
$("#views").empty();
$("#views").append("<canvas id=\"canvas\">");
canvas = $("#canvas")[0];
context = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
$("#canvas").Jcrop({
onSelect: selectcanvas,
onRelease: clearcanvas,
@R_554_2419@Width: crop_max_width,
@R_554_2419@Height: crop_max_height
}, function() {
jcrop_api = this;
});
clearcanvas();
}
然后在提交时，我们提交任何未决的操作，例如applyCrop（）或applyScale（），如果需要的话，将数据添加到备用字段的隐藏字段中。然后我们有了一个系统，我们可以轻松地以任何方式修改画布，然后在提交画布时正确发送数据。
function applyCrop() {
canvas.width = prefsize.w;
canvas.height = prefsize.h;
context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
validateImage();
}
画布被添加到div视图中。
<div id="views"></div>
为了捕获PHP（drupal）中的附件，我使用了类似的方法：
function makeFileManaged() {
if (!isset($_FILES['croppedfile']))
return NULL;
$path = $_FILES['croppedfile']['tmp_name'];
if (!file_exists($path))
return NULL;
$result_filename = $_FILES['croppedfile']['name'];
$uri = file_unmanaged_move($path, 'private://' . $result_filename, FILE_EXISTS_RENAME);
if ($uri == FALSE)
return NULL;
$file = File::Create([
'uri' => $uri,
]);
$file->save();
return $file->id();
}
602392714
清零编程群