如何使用 Javascript 图像裁剪器“Croppie”保存答案

【问题标题】：How to save using Javascript Image cropper "Croppie"如何使用 Javascript 图像裁剪器“Croppie”保存
【发布时间】：2016-04-22 03:13:34
【问题描述】：

Croppie 使用 DIV 容器而不是 CANVAS 进行裁剪。我正在尝试找出如何将生成的裁剪图像从此 DIV 保存到服务器上的目录中，例如通过“保存”按钮。

这是我的 HTML 代码...

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
        <title>Demo Croppie</title>
        <link rel="Stylesheet" type="text/css" href="css/croppie.css" />
        <link rel="Stylesheet" type="text/css" href="css/sweetalert.css" />

    </head>
    <body>

        <div id="testCanvas"></div>
        <div class="actions" style="margin-left: auto; margin-right: auto; width:250px;">
            <button class="vanilla-result">Result</button>
            <button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
            <button class="vanilla-rotate" data-deg="90">Rotate Right</button>
        </div>

    <p><button onclick="function();">Save</button></p>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/croppie.js"></script>
    <script src="js/demo.js"></script>
    <script src="js/sweetalert.min.js"></script>
        <script>
          Demo.init();
        </script>

    </body>
    </html>

这是我的 JavaScript 配置...

function demoVanilla() {
    var vanilla = new Croppie(document.getElementById('testCanvas'), {
        viewport: { width: 300, height: 300, type: 'square' },
        boundary: { width: 350, height: 350 },
        enableOrientation: true
    });
    vanilla.bind({
        url: 'imgs/demo-1.jpg',
        orientation: 1
    });

    document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
        vanilla.result('canvas').then(function (src) {
            popupResult({
                src: src
            });
        });
    });

    $('.vanilla-rotate').on('click', function(ev) {
        vanilla.rotate(parseInt($(this).data('deg')));
    });
}

其余部分默认来自 Croppie，https://github.com/Foliotek/Croppie，例如 demo.js 等。

【问题讨论】：

我认为这个问题与 javascript 本身无关，因为您只想将裁剪数据记录到您的数据库/服务器中。请考虑阅读这个问题：stackoverflow.com/questions/34237020/…
这是一个很好的链接，让我很接近。但唯一的事情是我对 Javascript 的了解还不够，无法成功提取上传功能。我的 Croppie 从服务器上的目录中获取图像，而不是通过上传。所以我想弄清楚如何从脚本中删除上传功能 [link]stackoverflow.com/a/34623950/1618085 并且只使用保存到服务器功能......有人可以帮我吗？

标签： javascript

【解决方案1】：

这是一个关于如何制作下载按钮的示例。如果您弄清楚这是如何工作的，那么您只需将 <a>link 替换为 <form> 并带有提交按钮，

var vanillaResult = document.querySelector('.vanilla-result'),
  vanillaSave = document.querySelector('.vanilla-save'),
  vanillaRotate = document.querySelector('.vanilla-rotate');

function demoVanilla() {
  var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
    viewport: {
      width: 100,
      height: 100
    },
    boundary: {
      width: 300,
      height: 300
    },
    enableOrientation: true
  });
  vanilla.bind({
    url: 'http://foliotek.github.io/Croppie/demo/cat.jpg',
    orientation: 1
  });
  vanillaResult.addEventListener('click', function() {
    vanilla.result('canvas').then(resultVanilla);
  });
  vanillaSave.addEventListener('click', function() {
    vanilla.result('canvas').then(saveVanilla);
  });
  vanillaRotate.addEventListener('click', function() {
    vanilla.rotate(parseInt($(this).data('deg')));
  });
}

function resultVanilla(result) {
  swal({
    title: '',
    html: true,
    text: '<img src="' + result + '" />',
    allowOutsideClick: true
  });
}

function saveVanilla(result) {
  swal({
    title: '',
    html: true,
    text: '<a id="save" href="' + result + '" download="result"><img src="' + result + '" /><br><button>Download</button></a>',
    showConfirmButton: false,
    showCancelButton: true,
    allowOutsideClick: true,

  });
}

demoVanilla();

body {
  min-width: 360px;
}
.actions {
  width: 300px;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head>
  <title>Demo Croppie</title>
  <link rel="Stylesheet" type="text/css" href="http://foliotek.github.io/Croppie/croppie.css" />
  <link rel="Stylesheet" type="text/css" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" />

</head>

<body>

  <div id="vanilla-demo"></div>

  <div class="actions">
    <button class="vanilla-result">Result</button>
    <button class="vanilla-save">Save</button>
    <button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
    <button class="vanilla-rotate" data-deg="90">Rotate Right</button>
  </div>


  <div id="result"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://foliotek.github.io/Croppie/croppie.js"></script>
  <script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
</body>

</html>

【讨论】：

【解决方案2】：

知道了！

感谢 Croppie “thedustinsmith” 和 “TWFPSP” 的开发者之一为我提供了正确的永恒资源和他们提供的信息。

$( document ).ready(function() {
    vanillaRotate = document.querySelector('.vanilla-rotate');
    var $uploadCrop = $('#upload-demo');
        $uploadCrop.croppie({
            viewport: {
                width: 250,
                height: 250,
                type: 'square'
            },
            boundary: {
                width: 300,
                height: 300
            }
        });
        $uploadCrop.croppie('bind', 'imgs/cat.jpg');
        vanillaRotate.addEventListener('click', function() {
        vanilla.rotate(parseInt($(this).data('deg')));
        });
    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'original'
        }).then(function (resp) {
            $('#imagebase64').val(resp);
            $('#form').submit();
        });
    });
});

HTML 正文 ...

<form action="test-image.php" id="form" method="post">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
<button class="vanilla-rotate" data-deg="-90">Rotate</button>

test-image.php ...

<?php
    if(isset($_POST['imagebase64'])){
        $data = $_POST['imagebase64'];

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);

        file_put_contents('image64.png', $data);
    }
?>

现在旋转功能不起作用，我正在尝试修复它。似乎不知道如何在此设置中包含方向配置，这与演示文件中说明的 demoUpload 不同。但至少保存到服务器的效果很好。

【讨论】：