图片混合组件
这是一个很'常用'的图片混合组件。
支持平台
微信小程序
效果
层级
使用
新建小程序，如果存在跳过此步骤。
在项目目录下执行npm init生成package.json文件，如果存在package.json文件跳过此步骤。
执行npm i picture-mixer安装组件。
点击操作栏上的工具-构建npm成功之后将会出现一个miniprogram_npm文件夹。
引用组件
index.json
{
"usingComponents": {
"p-mixer": "/miniprogram_npm/picture-mixer/index"
},
"disableScroll": true // 防止ios随意拖拽
}加载组件
index.wxml
<p-mixer id="pm"></p-mixer>
<view class="op">
<button type="primary" bindtap="add">添加</button>
<button type="primary" bindtap="save">保存</button>
</view>
<image class="preview" src="{{preSrc}}" style="width: {{w}}px; height: {{h}}px;" mode="scaleToFill"></image>组件方法
index.js
Page({
data: {
preSrc: "",
w: 0,
h: 0
},
add() {
wx.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success: (res) => {
res.tempFiles.forEach(t => {
try {
this.selectComponent('#pm').add(t.tempFilePath)
} catch (error) {
console.log(error);
}
})
}
})
},
async save() {
let res = await this.selectComponent('#pm').save()
this.setData({ preSrc: res.tempFilePath, w: res.width, h: res.height })
}
})组件样式
index.wxss
page {
display: flex;
flex-direction: column;
}
#pm,
.preview {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
margin: 20px auto;
}
.op {
display: flex;
justify-content: space-around;
}
button {
display: inline-flex;
}属性
config 🆕
config: IPictureMixerConfig 配置
/**
* 图像操作按钮
*/
export interface IPictureOperateButton {
/** 图片地址 */
url?: string
/** 轴心点 0~1 */
pivotX?: number,
pivotY?: number,
/** 相对坐标 */
offsetX?: number
offsetY?: number
width?: number
height?: number
}
/**
* 图片混合器配置
*/
export interface IPictureMixerConfig {
/** 用于改变图片清晰度 尽量不要太大
* @version 1.0.1
*/
definition?: number
/** 渲染间隔 ms */
renderInterval?: number
/** 允许缩放 写的很烂 */
allowScale?: boolean
/** 允许移动 */
allowMove?: boolean
/** 允许删除 */
allowRemove?: boolean
/** 允许旋转
* @version 1.0.4
*/
allowRotate?: boolean
/**
* 允许自动设置置顶
* 逻辑点击哪个图片哪个图片置顶
*/
allowAutoSetTop?: boolean
/**
* 允许展示水印
* 仅在无图的时候展示
* @version 1.0.3
*/
allowWatermark?: boolean
/** 背景颜色 */
background?: string
/** 点 */
point?: {
/** 颜色 点 */
color?: string,
/** 半径 */
raduis?: number,
},
/** 线 */
line?: {
/** 颜色 线 */
color?: string,
/** 宽度 */
width?: number
},
/** 缩放 */
scale?: {
/** 1.0.2 模式 */
mode?: keyof IPictureMixerConfigScaleMode
/** 1.0.2 最小缩放比例 */
minRatio?: number
/** 暂时还没用到 最小宽度 */
minWidth?: number
/** 暂时还没用到 最大高度 */
minHeight?: number
},
/** 移动 */
move?: {
limitMode?: keyof IPictureMixerConfigMoveLimitMode
}
/** 添加 */
add?: {
/** 添加数量 */
count?: number,
/** 宽度比例 0~1 */
scaleWidth?: number
/** 高度比例 0~1 */
scaleHeight?: number
},
/** 删除 */
remove?: IPictureOperateButton,
/** 保存默认值
* @version 1.0.3
*/
save?: {} & IPictureMixerSaveParams
/** 水印图片
* @version 1.0.2
*/
watermark?: IPictureOperateButton
/**
* 旋转配置
* @version 1.0.4
*/
rotate?: IPictureOperateButton
}
/**
* 保存图片的参数
*/
export interface IPictureMixerSaveParams {
/**
* 图片格式，默认为 image/png
*/
type?: keyof IPictureMixerSaveType
/**
* 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
*/
encoderOptions?: number
}
interface IPictureMixerSaveType {
'image/png': string
'image/jpeg': string
'image/webp': string
}
interface IPictureMixerConfigScaleMode {
"width/height": string
"ratio": string
}
interface IPictureMixerConfigMoveLimitMode {
/** 默认 */
none: string
/** 限制图片 */
picture: string
/** 限制点 */
point: string
}方法
add
add(url: string) 添加图片
save
async save(p?: IPictureMixerSaveParams): Promise<IPictureMixerSaveResult> 保存图片
/**
* 保存图片的参数
*/
export interface IPictureMixerSaveParams {
/**
* 图片格式，默认为 image/png
*/
type?: keyof IPictureMixerSaveType
/**
* 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
*/
encoderOptions?: number
}
interface IPictureMixerSaveType {
'image/png': string
'image/jpeg': string
'image/webp': string
}
export interface IPictureMixerSaveResult {
/** BASE64字符串 */
base64: string,
/** 临时图片 */
tempFilePath: string,
/** 渲染的图片宽度 */
width: number,
/** 渲染的图片高度 */
height: number
}事件
loaded
loaded(e:IPicturnMixerLoadedParams) 加载完成
/**
* 加载完成回调参数
*/
export interface IPicturnMixerLoadedParams {
detail: {
backgroundContext: CanvasRenderingContext2D,
width: number,
height: number
}
}change
change(e:IPicturnMixerLoadedParams) 内容变更
/**
* 内容变更回调参数
*/
export interface IPicturnMixerChangeParams {
detail: {
pictures: Picture[]
}
}
class Picture {
url: string
x: number
y: number
width: number
height: number
img: CanvasImageSource
/** 初始值 */
initialX: number
initialY: number
angle: number
private _initialWidth: number
private _initialHeight: number
get initialWidth() {
if (this.angle % 180 == 0)
return this._initialWidth
else
return this._initialHeight;
}
get initialHeight() {
if (this.angle % 180 == 0)
return this._initialHeight
else
return this._initialWidth;
}
set initialWidth(val) {
this._initialWidth = val;
}
set initialHeight(val) {
this._initialHeight = val;
}
constructor(x?: number, y?: number, width?: number, height?: number) {
this.initialX = this.x = x;
this.initialY = this.y = y;
this.initialWidth = this.width = width;
this.initialHeight = this.height = height;
this.angle = 0;
}
get leftTop() {
return Vector2.c(this.x, this.y)
}
get rightTop() {
return Vector2.c(this.x + this.width, this.y)
}
get rightBottom() {
return Vector2.c(this.x + this.width, this.y + this.height)
}
get leftBottom() {
return Vector2.c(this.x, this.y + this.height)
}
/**
* 获取四个点坐标
*/
get points(): Vector2[] {
return [this.leftTop, this.rightTop, this.rightBottom, this.leftBottom]
}
}