Question

我正在制作上传个人资料照片。

我正在使用www.croppic.net，因为它是浏览器兼容的。

我浪费了2天。但我无法得到适当的例子。

我已经从网站页脚部分下载了整个网站链接。

但删除不必要的js / css（Bootstrap等）之后。我仍然不知道它是如何工作的：D ..

请建议我使用浏览器compitible提供上传和裁剪的任何其他jquery

Answer 1

您必须知道包含所有必需的文件。我已经运行它并将图像作为Ajax请求发布并将其保存在服务器上。那些文件是：

在Header的croppic.css
为您的图片区域添加一些CSS，例如，您有div tag作为插件的父级，我们将其称为cropHeaderWrapper，并且overflow:hidden;height: 420px;direction: ltr;
我稍后会告诉你的插件
包括https://code.jquery.com/jquery-2.1.3.min.js
包括jquery.mousewheel.min.js
包括croppic.min.js
并初步说明我会告诉你

对于3的情况，我们有这些代码：

<div class="col-xs-12 text-center cropHeaderWrapper">
    <div id="croppic"></div>
    <span class="btn" id="cropContainerHeaderButton">Browse</span>
    <input type="hidden" id="get_img_url">
</div>

对于cropHeaderWrapper我告诉你这是你的插件的父级，然后我们定义div tag并分配一个名为ID的{{1}}，之后我们定义一个浏览密钥我们必须在我解释它的配置中初始化它，最后一个我们有croppic来获取图像保存在服务器上的路径。

Config部分包含以下代码：

input tag

var croppicHeaderOptions = { cropUrl:'Blog/upload_img', outputUrlId: 'get_img_url', customUploadButtonId:'cropContainerHeaderButton', modal:false, processInline:true, onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') }, onAfterImgUpload: function(){ console.log('onAfterImgUpload') }, onImgDrag: function(){ console.log('onImgDrag') }, onImgZoom: function(){ console.log('onImgZoom') }, onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') }, onAfterImgCrop:function(){ console.log('onAfterImgCrop') }, onReset:function(){ console.log('onReset') }, onError:function(errormessage){ console.log('onError:'+errormessage) } } var croppic = new Croppic('croppic', croppicHeaderOptions);是您希望处理图像以保存在服务器上的路径。在这种情况下，我在cropUrl上工作，这是该函数的路径，您可以将其作为MVC或其他任何路径。 example.php是您保存图片的路径网址。 outputUrlId是您在本地浏览图片的按钮。

请注意，我们不需要上传图片，然后裁剪它！我们可以使用customUploadButtonId并将其设置为processInline，我们的图片将作为base64上传，毕竟我们需要对图片进行处理，我们只需将其保存在服务器上即可。我正在使用这个插件，它也适用于IE版本8。如果您有任何疑问，请通知我。

Answer 2

croppic具有非常好的浏览器兼容性。仅下载干净版本。使用cropicId包含一个div：

<div id="yourId"></div>

启动croppic：

    var cropperOptions = {
        uploadUrl:'path_to_your_image_proccessing_file.php'
    }       

    var cropperHeader = new Croppic('yourId', cropperOptions);

我发现在使用yourId的div上你必须使用来自css #croppic的默认id。如果你想改变它，也可以在croppic.css中使用它。

如果您使用php处理文件，请下载示例并按照网站构建示例中的说明使用它们。

简单的croppic示例jquery

2 个答案: