jquery插件Croppie裁剪图像错误 [英] Jquery plugin Croppie to crop image Error
本文介绍了jquery插件Croppie裁剪图像错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的网站上使用Jquery Croppie Plugin为我的用户裁剪图像，但是我遇到了这个问题，我编写的代码在 Croppie网站
以下是我的代码
HTML code
< input type =fileid =uploadvalue =选择文件>
< button class =upload-result>结果< / button>
< div class =upload-msg>
上传文件以开始裁剪
< / div>
< div id =upload-demo>< / div>
JS代码
< code $ $ uploadCrop = $（'＃upload-demo'）。croppie（{
viewport：{
width：200，
height：200，
type： 'circle'
}，
boundary：{
width：300，
height：300
}
}）;
注意：我已将jquery，croppie.js和croppie.css链接到我的网站
解决方案
试试吧，它适用于我。
我使用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）;
}
？>
<！DOCTYPE html>
< html lang =pt-br>
< head>
< meta charset =utf-8>
< title>测试< /标题>
< link href =croppie.css =stylesheettype =text / css>
< script type =text / javascriptsrc =jquery-1.11.3.min.js>< / script>
< script type =text / javascriptsrc =croppie.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
var $ uploadCrop;
function readFile（input）{
if（input.files&& （）;
reader.onload = function（e）{
$ uploadCrop.croppie（'bind'，{
url：e.target.result
））;
$（'。upload-demo'）。addClass（'ready'）;
}
reader.readAsDataURL（input .files [0]）;
}
}
$ uploadCrop = $（'＃upload-demo'）。croppie（{
viewport：{
width：200，
height：200，
type：'circle'
}，
boundary：{
width：300，
height： （'＃upload'）。on（'change'，function（）{readFile（this）;}）; $ b $（$＃
$）
$ b $（'。upload-result'）。on（ 'click'，function（ev）{
$ uploadCrop.croppie（'result'，{
type：'canvas'，
size：'original'
}）。then （function（resp）{
$（'＃imagebase64'）。val（resp）;
$（'＃form'）。submit（）;
}）;
}）;
}）;
< / script>
< / head>
< body>
< form action =test-image.phpid =formmethod =post>
< input type =fileid =uploadvalue =选择文件>
< div id =upload-demo>< / div>
< input type =hiddenid =imagebase64name =imagebase64>
< a href =＃class =upload-result>发送< / a>
< / form>
< / body>
< / html>
I want to use Jquery Croppie Plugin on my site to crop image for my user but I've got this problem the code that i write not show as an example in Croppie Site
Here's my code
HTML code
<input type="file" id="upload" value="Choose a file">
<button class="upload-result">Result</button>
<div class="upload-msg">
Upload a file to start cropping
</div>
<div id="upload-demo"></div>
JS code
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
NB : I have link my site with jquery, croppie.js and croppie.css
解决方案
Try it, it works for me. I used PHP to save the image.
<?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);
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="croppie.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var $uploadCrop;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
});
$('.upload-demo').addClass('ready');
}
reader.readAsDataURL(input.files[0]);
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () { readFile(this); });
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'original'
}).then(function (resp) {
$('#imagebase64').val(resp);
$('#form').submit();
});
});
});
</script>
</head>
<body>
<form action="test-image.php" id="form" method="post">
<input type="file" id="upload" value="Choose a file">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
</body>
</html>
这篇关于jquery插件Croppie裁剪图像错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
