![Upload]( "Upload")
本文介绍了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代码 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 SiteHere's my codeHTML 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裁剪图像错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 09-27 00:34