javascript里裁切图片插件库

第三方库 cropperjs 适用于JS、Vue、Jquery

安装

npm install cropperjs

按照格式要求配置如下

<!-- Wrap the image or canvas element with a block element (container) -->
<div><img id="image" src="picture.jpg">
</div>

CSS 如下配置

/* Ensure the size of the image fit the container perfectly */
img {display: block;/* This rule is very important, please don't ignore this */max-width: 100%;
}

Javascript 如下配置


import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';mounted () {const image = this.$refs.imgconst cropper = new Cropper(image, {viewMode: 1,dragMode: 'move',aspectRatio: 1,autoCropArea: 1,cropBoxMovable: false,cropBoxResizable: false,background: false,movable: true})console.log(cropper)},

javascript里裁切图片插件库相关推荐

前端裁切图片插件之cropper介绍
给大家介绍一个前端非常实用的依赖于jquery的图片裁切插件cropper. 因为前端无法做到图片的裁切,所以实际中需要用cropper和后台的GraphicsMagick相互配合. 先贴上cropp ...
超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
JavaScript图片缩放库Zooming
Zooming 是一款纯 javascript 图片缩放库,主要特点有: 不依赖其他库,纯 JavaScript 实现,支持移动设备: 流畅的动画: 可缩放高清图像: 易于集成和定制. 查看演示转载 ...
Rasterino 2.3.0版for AI 2020 (Illustrator裁切图片一键PS修图插件)
转载自亿品元素原文链接:http://www.epinv.com/post/8147.html Rasterino v2.3.0 64bit版(支持AI 2020).Rasterino是一款非常实用 ...
Flutter 项目编写第三方插件库文件引入，本地图片 json数据引入解析
FlutterDemo是如何一步一步搭建起来的最初就是直接新建flutter项目,就会自动建立一个入门项目.(开始项目前,需先学习Dart语言) flutter项目代码都在lib目录下编写: 新建包 ...
使用jcrop实现裁切图片
jcrop为基于jquery库实现的图片裁切插件.当使用该插件使需要引入jquery和jcrop(包括js文件和css文件). //css文件的引入<link rel="stylesh ...
dts插件 foobar pan baidu_SU插件插件库安装教程
插件下载 [名称]:SketchUP插件-插件库 [大小]:219.7 MB [语言]:简体中文 [安装环境]:Win7/Win8/Win10 [支持版本]:SketchUP2014-2019 [32 ...
精心挑选12款优秀的 JavaScript 日历和时间选择插件
今天这篇文章向大家分享12款精心挑选的优秀 JavaScript 日历和时间选择插件,都带有详细的使用教程和效果演示.这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果.同时推 ...
JavaScript 里，$ 代表什么？/JQuery是什么语言？/html中用link标签引入css时的中 rel=stylesheet属性？/EL表达式是什么？...
JavaScript 里,$ 代表什么? 比如说我写一个mouseover事件: $(document).ready(function(){ $("p").mouseover(fu ...

javascript里裁切图片插件库

javascript里裁切图片插件库相关推荐

最新文章

热门文章