• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

使用Vue-Rx的Vue.js图像裁剪组件

Vue rin, seun 10个月前 (06-19) 282次浏览 0个评论

使用Vue-Rx的Vue.js图像裁剪组件。

  • 无需任何操作即可将图像剪辑组件添加到Vue应用程序。
  • 触摸设备受支持且响应迅速。

注意

在使用插件和组件之前,您应该了解以下几点:

  • 它基于vue-rx
  • 使用vuejs-clipper插件还将vue-rx插件添加到vue。
  • 组件根据宽度而不是高度进行响应,请参阅组件布局
  • 您可以裁剪自己的图像(本地上传的图像或站点上提供的图像),但是除非图像服务器设置了CORS标头,否则您不能裁剪跨源图像。
  • 组件的输入是图像URL,输出是canvas元素,它们仅帮助您将图像裁剪到画布,您需要处理其他事情,例如将文件输入文件转换为图像URL将输出画布转换为图像

安装

NPM和ESM

安装vuejs-clipper

$npm install vuejs-clipper --save
重击

需要css loader,例如:sass-loader,如果尚未安装:

$npm install -D sass-loader node-sass
重击

(1)使用vuejs-clipper插件

使用vuejs-clipper插件还将vue-rx插件添加到Vue。

默认情况下,它将所有组件注册到Vue全局范围。

import Vue from 'vue'
import VuejsClipper from 'vuejs-clipper'
// install
Vue.use(VuejsClipper)
的JavaScript

使用默认组件名称将某些组件注册为全局组件

Vue.use(VuejsClipper, {
 components: {
    clipperBasic: true,
    clipperPreview: true
 }
})
的JavaScript

具有定制的组件名称

Vue.use(VuejsClipper, {
 components: {
  clipperBasic: 'image-clipper-basic',
  clipperPreview: 'my-preview'
 }
})
的JavaScript

没有注册任何组件,但是带有一些插件选项

Vue.use(VuejsClipper, {
  components: null,
 parentPropName: 'myCustomerName'
  /*
   parentPropName:
    Add property to Vue instance to store `clipper-preview` list.
    You can change the property name
    default: '_imgPreviewLists'
  */
})
的JavaScript

(2)单独导入组件

安装vue-rx及其对等依赖性rxjs

$npm install --save vue-rx rx-js
重击

使用vue-rx

import Vue from 'vue'
import VueRx from 'vue-rx'
// install vue-rx
Vue.use(VueRx)
的JavaScript

然后导入您的组件(SFC)

import { clipperBasic, clipperPreview } from 'vuejs-clipper'

export default {
  components: {
    clipperBasic,
    clipperPreview
  }
}
的JavaScript

脚本

在Vue.js之后包含vuejs-clipper umd脚本。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="./dist/vuejs-clipper.umd.min.js"></script>
<link rel="stylesheet" href="./dist/vuejs-clipper.css">
的HTML

在html / template中使用

<clipper-basic src="example.jpg"></clipper-basic>
的HTML

组件

使用Vue-Rx的Vue.js图像裁剪组件

请参阅详细示例

快船基本

图像裁剪组件

import { clipperBasic } from 'vuejs-clipper'

的JavaScript

PROP TYPE DEFAULT DESCRIPTION
src string image src
preview string matches clipper-preview‘s name to show preview image.
border number 1 border width
outline number 6 outlines near by the border to help user zooming.
corner boolean true show corner layout
grid boolean true show grid layout
ratio number ratio of clipping area (width/height). ex: 14/3 .
wrap-ratio number NaN ratio of clipping container (width/height). ex: 14/3 .
mode ‘normal’/’switch’ ‘normal’ if ratio is set, this prop will affect how clipping area zoom.
bg-color string ‘white’ background color
shadow string ‘rgba(0,0,0,0.4)’ shadow color
rotate number 0 rotate degree
scale number 1 transform scale
min-width number 1 minimum width(%) of clipping box related to clipping component’s width
min-height number 1 minimum height(%) of clipping box related to clipping component’s height.
init-width number 50 clipping area’s width(%) when the image loaded.
init-height number 50 clipping area’s height(%) when the image loaded.
touch-create boolean true enable/disable create new clipping area on touch device
cross-origin string undefined crossorigin attribute of <img /> inside clipper. ex: anonymous

有关布局设置的更多详细信息,请参见组件深度布局

  • 方法
METHOD ARGUMENT RETURN DESCRIPTION
clip options canvas element get clipping canvas element
getDrawPos {pos, translate}: positions and transformation get result canvas information

clip() 参数

名称 类型 默认 描述
options.wPixel 未定义 设置结果画布的宽度(像素)。
options.maxWPixel 未定义 设置结果画布的最大宽度(像素)。

设置引用以使用组件方法

<clipper-basic ref="clipper" />

在您的Vue实例方法中

const canvas = this.$refs.clipper.clip()
rxjs的JavaScript
  • 事件
EVENT PARAMETERS DESCRIPTION
load $event image onload
error $error image onerror

用法:

<clipper-basic @error="errorCb" @load="loadCb" />
rxjs的HTML
  • 数据
    DATA TYPE DEFAULT DESCRIPTION
    imgRatio number NaN upload image’s ratio (image naturalWidth/natrualHeight). Default value is NaN, after the load event the value will be set.
    zoomTL$ object clipping area’s position(%), can be top/bottom and left/right.
    zoomWH$ object clipping area’s width and height(%)

用法:

this.$refs.clipper.imgRatio
this.$refs.clipper.zoomWH$.width
的JavaScript
  • 插槽
    SLOT DESCRIPTION
    placeholder if no src provided, show placeholder
<clipper-basic src="">
  <div slot="placeholder">No image</div>
</clipper-basic>
rxjs的HTML
  • rxjs主题
    SUBJECT DESCRIPTION
    setTL$ Set the position of the zooming area.
    setWH$ Set the width and height of the zooming area.
    onChange$ Subject that subscribe to zooming, moving and rotating subjects.

用法:

this.$refs.clipper.setTL$.next({ left: 0, top: 0 }) // percentage 0%
this.$refs.clipper.setTL$.next({ right: 0, bottom: 10 })
this.$refs.clipper.setWH$.next({ width: 100, height: 100 }) // percentage 100%

this.$refs.clipper.onChange$.subscribe(() => {
  // This happens whenever zooming, moving and rotating occur.
})
的JavaScript

固定

图像裁剪组件

import { clipperFixed } from 'vuejs-clipper'
的JavaScript
  • 道具
    PROP TYPE DEFAULT DESCRIPTION
    src string image src
    preview string matches clipper-preview‘s name to show preview image.
    ratio number 1 ratio of clipping area (width/height). ex: 14/3 .
    zoom-rate number 0.04 zooming faster if this value is larger
    min-scale number 0.1 minimum transform scale
    border number 1 border width
    border-color string ‘white’ border color
    grid boolean true show grid layout
    round boolean false Use a round clipping area, this only effect the component layout, clipping results are still rectangular.
    bg-color string ‘white’ background color
    shadow string ‘rgba(0,0,0,0.4)’ shadow color
    rotate number 0 rotate degree
    area number 50 width or height (%) of clipping box(depends on ratio).
    cross-origin string undefined crossorigin attribute of <img /> inside clipper. ex: anonymous
  • 方法
    METHOD ARGUMENT RETURN DESCRIPTION
    clip options canvas element get clipping canvas element.
    getDrawPos {pos, translate}: positions and transformation get result canvas information

    clip() 参数

    NAME TYPE DEFAULT DESCRIPTION
    options.wPixel number undefined Set the the width (pixel) of result canvas.
    options.maxWPixel number undefined Set the the maximum width (pixel) of result canvas.
  • 事件
    EVENT PARAMETERS DESCRIPTION
    load $event image onload
    error $error image onerror
  • 数据
    DATA TYPE DEFAULT DESCRIPTION
    imgRatio number NaN upload image’s ratio (image naturalWidth/natrualHeight). Default value is NaN, after the load event the value will be set.
    bgTL$ object image’s translate(X,Y)
    bgWH$ number image’s scaling
  • 插槽
    SLOT DESCRIPTION
    placeholder if no src provided, show placeholder
  • rxjs主题
    SUBJECT DESCRIPTION
    setTL$ Set the top and left of the image.
    setWH$ Set the sizing(scaling) of the image.
    onChange$ Subject that subscribe to zooming, moving and rotating subjects.
this.$refs.clipper.setTL$.next({ left: 50, top: 50 }) // percentage 0%
this.$refs.clipper.setWH$.next(0.6) // transform scale(0.6)

this.$refs.clipper.onChange$.subscribe(() => {
  // This happens whenever zooming, moving and rotating occur.
})
的JavaScript

预览

预览剪辑结果

import { clipperPreview } from 'vuejs-clipper'
的JavaScript
  • 道具
    PROP TYPE DEFAULT DESCRIPTION
    name string name that matches clipper component’s preview property
  • 插槽
    SLOT DESCRIPTION
    placeholder if no src provided, show placeholder

限幅器

一个简单的输入范围组件

import { clipperRange } from 'vuejs-clipper'
rxjs的JavaScript

使用v-model绑定数据clipper-range

  • 道具
    PROP TYPE DEFAULT DESCRIPTION
    max number 10 maximum value of range
    min number 0 minimum value of range

上载

0.2.0中的新组件

一个将图像文件转换为URL的上传按钮

import { clipperUpload } from 'vuejs-clipper'
的JavaScript

使用v-model绑定数据clipper-upload

  • 道具
    PROP TYPE DEFAULT DESCRIPTION
    check boolean true Check if upload file is an image. If set to true, when upload files that are not images, it will do nothing, so you will not get an error event on clipping component.
    accept string ‘*’ Bind accept attribute to file input tag.
    exif boolean true Transform EXIF image to correct orientation when uploading.
  • 事件
    EVENT PARAMETERS DESCRIPTION
    input $event Result domgstring on change
  • 数据
    DATA TYPE DEFAULT DESCRIPTION
    file File Object null Uploaded file’s original File Object.

喜欢 (0)

您必须 登录 才能发表评论!