前端使用JCrop功能进行图片上传

安装: 13

依赖: 0

建议者: 0

安全性: 0

星星: 0

关注者: 2

分支: 0

开放问题: 0

语言:JavaScript

类型:silverstripe-vendormodule

dev-main 2023-11-30 23:06 UTC

This package is auto-updated.

Last update: 2024-09-30 02:13:11 UTC


README

CropField创建了一个ImageUploadField,允许在前端使用Jcrop选择裁剪区域。这个新版本与SS5兼容,不再依赖于unclecheese/dropzone,但会复制unclecheese的部分代码。

@author TheTigerDuck janosch@spleen.de

用法

function ImageFrom(){
    $fields = new FieldList(
        $cf = new CropField("Image", "Image")
    );
    $cf->setBoxWidth(600);
    $cf->setBoxHeight(6000);
    $cf->setMaxWidth(0);
    $cf->setMaxHeight(0);
    $cf->setAspectRatio(1);
    $actions = new FieldList(
        new FormAction("submit", "submit")
    );
    return new Form($this, "ImageFrom", $fields, $actions);
}

function submit($data,$form){
    $original = Image::get()->byID($data['Image']['ID']);
    $cropped = $original->CroppedFromPos($data['Image']['width'], $data['Image']['height'], $data['Image']['posX'], $data['Image']['posY']);
    //overwrite the Original Image by the Cropped one
    $file = File::create();
    // Save file into backend
    $config = [
        'conflict' => AssetStore::CONFLICT_OVERWRITE,
        'visibility' => AssetStore::VISIBILITY_PUBLIC
    ];
    //genarate a unique filename to force regenerating image versions
    $hash = md5(rand().$profil->Email.$data['ProfilBild']['width'].$data['ProfilBild']['height'].$data['ProfilBild']['posX'].$data['ProfilBild']['posY'].$data['ProfilBild']['rotate']);
    $file->setFromLocalFile(Director::baseFolder() . "/public/" . $cropped->getSourceURL(), "Profilbilder/cropped/ProfileImage{$profil->ID}-{$hash}.".$cropped->getExtension(), null, null, $config);
    $file->write();
    $file->ClassName = Image::class;
    $file->write();
    $file->publishFile();
    $image = Image::get()->byID($file->ID);
    $image->publishSingle();
    $original->deleteFile();
    $original->doArchive();
    $profil->ImageID = $file->ID;
    $profil->write();
}