简单的裁剪示例 jquery答案

【问题标题】：simple croppic example jquery简单的裁剪示例 jquery
【发布时间】：2015-10-13 15:06:15
【问题描述】：

我正在上传个人资料图片。

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

我在上面浪费了 2 天时间。但我找不到合适的例子。

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

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

请向我推荐任何其他提供上传和裁剪并兼容浏览器的 jquery

【问题讨论】：

标签： jquery css crop

【解决方案1】：

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

header 中的croppic.css
为您的图像区域包含一些 CSS，例如您有 div tag 作为插件的父级，我们将其命名为 cropHeaderWrapper，它有 overflow:hidden;height: 420px;direction: ltr;
这个插件我稍后会告诉你
包括@987654321@
包括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并分配一个名为croppic的ID，之后我们定义一个浏览键，我们必须在配置中初始化它我解释了它，最后一个我们有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 是您保存图像的路径 URL。 customUploadButtonId是你在本地浏览图片的按钮。

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

【讨论】：

【解决方案2】：

croppic 具有很好的浏览器兼容性。只下载干净的版本。包含一个带有cropicId的div：

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

初始化裁剪图：

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

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

我发现在带有 yourId 的 div 上，您必须使用 css #croppic 中的默认 ID。如果您想更改它，请在croppic.css 中进行更改。

如果您使用 php 处理文件，请下载示例并像在网站构建示例中那样使用它们。

【讨论】：