前端裁切图片插件之cropper介绍

　　给大家介绍一个前端非常实用的依赖于jquery的图片裁切插件cropper.

　　因为前端无法做到图片的裁切,所以实际中需要用cropper和后台的GraphicsMagick相互配合.

　　先贴上cropper的网址https://fengyuanchen.github.io/cropperjs/和github地址:https://github.com/fengyuanchen/cropper　

　　第一步:下载cropper:

npm install cropper.

　　第二部:引入依赖包和插件包:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

　　第三部:在js中调用方法:

$('#image').cropper({aspectRatio: 16 / 9,crop: function(e) {// Output the result data for cropping image.
    console.log(e.x);console.log(e.y);console.log(e.width);console.log(e.height);console.log(e.rotate);console.log(e.scaleX);console.log(e.scaleY);}
});

　　其中aspectRatio 是指图片的长宽比

　　只需要将x,y,width,height,rotate,scaleX,scaleY这些数据传给后台,后台就可以根据数据进行图片的裁切.

　　使用cropper要注意一点,这个插件会在dom中构建一些标签,所以在图片展示的时候多注意:

转载于:https://www.cnblogs.com/H5C3XXN/p/6275758.html

前端裁切图片插件之cropper介绍相关推荐

javascript里裁切图片插件库
第三方库 cropperjs 适用于JS.Vue.Jquery 安装 npm install cropperjs 按照格式要求配置如下 <!-- Wrap the image or canvas ...
cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...
html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
解决了cropper裁切图片toDataURL()跨域报错的问题，记录一下。
@[TOC](toDataURL() 跨域解决方案) 那些说 img.crossOrigin = 'anonymous' 能解决问题请绕道,害我纠结了一天. 这两天在弄头像裁切,发现toDataURL ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果使用方法 Query ...
Rasterino 2.3.0版for AI 2020 (Illustrator裁切图片一键PS修图插件)
转载自亿品元素原文链接:http://www.epinv.com/post/8147.html Rasterino v2.3.0 64bit版(支持AI 2020).Rasterino是一款非常实用 ...
几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...

前端裁切图片插件之cropper介绍

前端裁切图片插件之cropper介绍相关推荐

最新文章

热门文章