``` npm install img-capture ```
npm install img-capture
npm install img-capture
`
##### 使用
`
必须开启 "enableSkia": "true"
`
- json
`
{
"usingComponents": {
"game": "img-capture/index"
}
}
`
- mini.project.json
`
{
"node_modules_es6_whitelist": [
"common-game"
]
}
`
- js
`
Page({
data: {
gameSource: {
// 不配做fullScaleShow或fullScreen，居中显示图片原本尺寸
// fullScaleShow: true,//true:开启以长边撑满容器等比显示
// fullScreen: true,//宽高拉伸撑满容器 优先级高于fullScaleShow
imgCheckType: "mask",//图片检测区域边界 bg:最小值为背景框 mask:最小值为裁剪框
moveOps: {
openMove: true,//开启移动
},
// 左上角拖动图标，其他三个角自动旋转显示
leftIcon: { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01KzU6b61EUdLvHgOhc_!!2185320355.png" },
mask: {
openDrag: true,//开启mask区域尺寸拖动
isScale: true,//保持等比缩放
minWidth: 10,//最小宽度
minHeight: 10,//最小高度
width: 400,//初始宽度
height: 200,//初始高度
alpha: 0.5//背景透明度
},
scaleOps: {
imgShowType: "none",//none：自由缩放，single：保持长边最小缩放为撑满容器 double：保持最短边缩放为撑满容器
openScale: !false, //是否开启缩放,默认false关闭
scaleLmd: 100, //值越小越灵敏
scaleRange: { min: 0.01, max: 10 } //缩放范围
},
},
},
onLoad() { },
onRef(ref) {
this.gameComponent = ref;
},
onInitDone() {
// 更新配置数据
this.gameComponent.onEvent("resetData", {
mask: {
openDrag: true,//开启mask区域尺寸拖动
isScale: true,//保持等比缩放
minWidth: 10,//最小宽度
minHeight: 10,//最小高度
width: 400,//初始宽度
height: 200,//初始高度
alpha: 0.9//背景透明度
}
})
this.gameComponent.onEvent("load", {
// scale: { x: 0.5, y: 0.5 },
src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01hWEuTv1EUdM8hGA7c_!!2185320355.png",
})
},
async exportFun() {
// 导出请在手机上预览效果
/* let base64 = await this.gameComponent.onEvent("getMaskImg", {
base64: true//true：返回base64路径,false:返回临时路径
}); */
let base64 = await this.gameComponent.onEvent("getMaskImg2");
this.setData({
imgSrc: base64
})
},
topImgFun() {
this.gameComponent.onEvent("renderTopImg", {
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iMdD9J1FJvfnSBaJW_!!1080040467.png",
noExport: true,//画布导出图片时，不导出此图
})
}
});
`
- xaml
`
导出图片
`
- acss
`
.pageBox{
position: absolute;
width: 750rpx;
height: 500rpx;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #ccc;
}
.btn1{
position: absolute;
left:0;
bottom: -100rpx;
}
.img{
background-color: red;
width: 400rpx;
height: 200rpx;
position: absolute;
right: 0;
bottom: 0;
}
``