vue 图片剪辑_用vue制作的图片剪辑组件

vue 图片剪辑

形状 (vueShapeImg)

Picture clipping component made with vue.

用vue制作的图片剪辑组件。

View demo 查看演示 Download Source 下载源

如何使用 (How to use)

import vueShapeImg from 'vueshapeimg'
Vue.use(vueShapeImg)

<vue-shape-img></vue-shape-img>

vueShapeImg API文档 (vueShapeImg API Doc)

道具 (props)

Parameters	Description	Type	Optional values	Default value
useFrame	Clipping pictures using marquee boxes	Boolean	Y	false
canResizeFrame	Whether the box can be scaled and moved	Boolean	Y	true
initRange	Left,Top,Width and Height of box initialization	Array	Y	[width * 0.25, height * 0.25, width * 0.5 ,height * 0.5]
height	-	Number	Y	500
width	-	Number	Y	500
timelyGetRange	Timely get user's select range	Boolean	Y	false
timelyImageData	Timely converting pictures that capture the user's range of choice into imageData	Boolean	Y	false

参量	描述	类型	可选值	默认值
useFrame	使用选取框剪切图片	布尔型	ÿ	假
canResizeFrame	盒子是否可以缩放和移动	布尔型	ÿ	真正
initRange	框初始化的左侧，顶部，宽度和高度	数组	ÿ	[宽度* 0.25，高度* 0.25，宽度* 0.5，高度* 0.5]
高度	--	数	ÿ	500
宽度	--	数	ÿ	500
及时获取范围	及时获得用户的选择范围	布尔型	ÿ	假
及时ImageData	及时将捕获用户选择范围的图片转换为imageData	布尔型	ÿ	假

提示：您不能直接使用imageData，请在画布上显示它putImageData (tips: You can't use imageData directly,show it in canvas putImageData)

方法 (methods)

Method name	Description	Parameters
rotate	Rotate the picture on canvas	deg(Arbitrary integer)
setImgSrc	Use network picture. Pictures with different domain names are best not to be used	imgSrc(Picture links or Base64 files)
fileClick	Use local picture	-
showMask	Open the mask layer, select the area	-
closeMask	Close the mask layer	-
getRange	Get the scope of user selection	-
setRange	Set the scope of user selection	[left,top,width,height]
getImg	Get pictures of the range selected by the user	type('base64'/'blob'), imgType('image/jpeg' Or other image types),encoderOptions(0.00 - 1.00)

方法名称	描述	参量
旋转	在画布上旋转图片	deg(任意整数)
setImgSrc	使用网络图片。 最好不要使用具有不同域名的图片	imgSrc(图片链接或Base64文件)
fileClick	使用本地图片	--
显示面具	打开遮罩层，选择区域	--
closeMask	关闭遮罩层	--
getRange	获取用户选择范围	--
setRange	设置用户选择范围	[左，上，宽，高]
getImg	获取用户选择范围的图片	type('base64'/'blob')，imgType('image / jpeg'或其他图像类型)，encoderOptions(0.00-1.00)

提示：getImg-> imgType->'image / jpeg'可以更好地压缩图片。 (tips: getImg -> imgType -> 'image/jpeg' can compress pictures better.)

发射 (emit)

emit name	Description
imageDataChange	if props timelyImageData is true, this emit can return the imageData in timely
rangeChange	if props timelyGetRange is true, this emit can return the range in timely
error	error tips: -1(Picture format error), -2(Picture loading failed), -3(Pictures are cross-domain resources)

发出名字	描述
imageDataChange	如果properlyTimeImageData为true，则此发射可以及时返回imageData
rangeChange	如果props whentimeGetRange属性为true，则此发射可以及时返回范围
错误	错误提示：-1(图片格式错误)，-2(图片加载失败)，-3(图片是跨域资源)

提示：您不能直接使用imageData，请在画布上显示它putImageData (tips: You can't use imageData directly,show it in canvas putImageData)

示例OnlineDemo (Example OnlineDemo)

<template>
   <div id="app">
     <div style="width: 500px;">
       <button @click="$refs.vueShapeImg2.fileClick()">localImg</button>
       <button @click="$refs.vueShapeImg2.setImgSrc('http://www.bqmyweb.cn/vueshapeimg/demo.png')">networkImg</button>
       <button @click="$refs.vueShapeImg2.showMask()">startCrop</button>
       <button @click="$refs.vueShapeImg2.closeMask()">endCrop</button>
       <button @click="getImg2">getImg</button>
       <button @click="$refs.vueShapeImg2.setRange([200,200,200,200])">setRange</button>
       <button @click="$refs.vueShapeImg2.rotate(10)">rotate10</button>
       <button @click="$refs.vueShapeImg2.rotate(-10)">rotate-10</button>
       <p style="font-size: 18px;font-weight: bold;">useFrame:true</p>
       <vueShapeImg @error="imgError" :height="400" :width="400" :useFrame="true" :timelyImageData="true" @imageDataChange="putImg2" ref="vueShapeImg2"></vueShapeImg>
       <canvas id="canvas2"></canvas>
     </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'app',
   data () {
     return {
       canvas2: null,
       canvas2Ctx: null
     }
   },
   mounted () {
     this.canvas2 = document.getElementById('canvas2')
     this.canvas2Ctx = this.canvas2.getContext('2d')
   },
   methods: {
     putImg2 (imgData) {
       this.canvas2Ctx.clearRect(0, 0, 500, 500)
       let obj = this.$refs.vueShapeImg2.getRange()
       this.canvas2.width = obj.w
       this.canvas2.height = obj.h
       this.canvas2Ctx.putImageData(imgData, 0, 0)
     },
     getImg2 () {
       console.log(this.$refs.vueShapeImg2.getImg('base64', 'image/jpeg', 0.7))
     },
     imgError (error) {
       console.error(error)
     },
   }
 }
 </script>

浏览器支持 (Browser support)

IE10 +，chrome，firefox或其他现代浏览器 (IE10+, chrome, firefox or other modern Browser)

翻译自: https://vuejsexamples.com/picture-clipping-component-made-with-vue/

vue 图片剪辑