如何使用Javascript保存圖像裁剪「Croppie」

Croppie使用DIV容器而不是CanVAS裁剪。我正試圖找出如何將由此DIV產生的裁剪圖像保存到服務器上的目錄，例如通過SAVE按鈕。如何使用Javascript保存圖像裁剪「Croppie」

這是我的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'))); 
    }); 
}

其餘則在默認情況下沒有在https://github.com/Foliotek/Croppie從Croppie變化，如demo.js等等。

來源

2016-04-20 James

我覺得這個問題與javascript本身沒有關係，因爲您只需要將裁剪數據記錄到數據庫/服務器中。請考慮閱讀這個問題：http://stackoverflow.com/questions/34237020/jquery-plugin-croppie-to-crop-image-error – Anna

這是一個很好的鏈接，並讓我接近。但唯一的是我不知道足夠的Javascript成功拉出上傳功能。我的Croppie從服務器上的目錄獲取圖像，而不是上傳。所以我想弄清楚如何從腳本[鏈接] http://stackoverflow.com/a/34623950/1618085剝離上載功能，並只使用保存到服務器功能......任何人都可以幫助我呢？ – James

得到它！

感謝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>

測試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不同。但至少保存到服務器的效果很好。

來源

2016-04-21 19:13:34 James

下面是如何製作下載按鈕的示例。如果你弄清楚如何工作的，那麼你只需要一個提交按鈕，以取代與<a>鏈接的<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>

來源

2016-04-20 22:36:45 rafaelcastrocouto

如何使用Javascript保存圖像裁剪「Croppie」

回答

相關問題