php jcrop,我应该如何使用jcrop在客户端裁剪图像并上传?

小编典典

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 = $("#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,

boxWidth: crop_max_width,

boxHeight: 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视图中。

为了捕获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();

}

2020-05-16

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值