• cropper截图不压缩PHP上传裁剪后的图片


    cropperjs使用不多说网上都有很详细的介绍如下面:

    https://blog.csdn.net/lxy4239/article/details/78920979

    主要讲下使用的经历

    裁剪后图片不失真效果显示

    直接上代码:

    链接:https://pan.baidu.com/s/1W1liylZzUwKNSt0CBIravw  密码:fypq

    等比裁剪:

    <div class="btn-group btn-group-crop" id="cutout">
    <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false">
    裁剪
    </span>
    </button>
    </div>
    var options = {
    aspectRatio: 0, //裁剪框比例
    preview: '.img-preview',
    crop: function (e) {
    $dataX.val(Math.round(e.x));
    $dataY.val(Math.round(e.y));
    $dataHeight.val(Math.round(e.height));
    $dataWidth.val(Math.round(e.width));
    $dataRotate.val(e.rotate);
    $dataScaleX.val(e.scaleX);
    $dataScaleY.val(e.scaleY);
    }
    };
    var originalImageURL = $image.attr('src');
    var uploadedImageURL;
    提交保存后台:
    $.post('./upload.php',data,function(ret){
    var obj = eval("(" + ret + ")");
    if(obj.res=='true'){
    $('.cropper-container').css('display', 'none');
    $('#image_orc').css('display', 'block');
    $('#image_orc').attr('src','image/'+obj.src);
    $('#image_orc').css('border','1px solid #ddd');

    }else{
    alert('上传失败');
    }
    },'text');

    <?php
    error_reporting(0);//禁用错误报告
    if (IS_POST) {
    header('Content-type:text/html;charset=utf-8');
    $base64_image_content = $_POST['imgBase'];
    //将base64编码转换为图片保存
    if (preg_match('/^(data:s*image/(w+);base64,)/', $base64_image_content, $result)) {
    $type = $result[2];
    $new_file = "image/";
    if (!file_exists($new_file)) {
    //检查是否有该文件夹,如果没有就创建,并给予最高权限
    mkdir($new_file, 0700);
    }
    $img='field' . ".{$type}";
    $new_file = $new_file . $img;
    //将图片保存到指定的位置
    if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
    echo json_encode(array('res' => 'true','src' => $img));
    }else{
    echo json_encode(array('res' => 'false'));
    }
    }else{
    echo 'false';
    }

    }


    ?>

    具体不懂的地方,细节问题可以加群讨论

  • 相关阅读:
    波涛 - 系统交易方法(2013年2月28日)
    【美】柯蒂斯·费思 - 海龟交易法则(2012年12月25日)
    【美】迈克尔·卡沃尔 - 趋势跟踪(2012年12月3日)
    DAX/PowerBI系列
    DAX基础入门
    (玩起来)DAX/PowerBI系列
    DAX/PowerBI系列
    DAX/PowerBI系列
    DAX/PowerBI系列
    MDX 用Ancestors得到Hierarchy中指定Level的值(附带SCOPE用法之一)
  • 原文地址:https://www.cnblogs.com/chaihy/p/10304814.html
Copyright © 2020-2023  润新知