平台兼容性
更新
1、修复按确定后,只有1/4图片大小。
2、修复h5拖动图片消失。
html代码
<canvas
class="cropper"
disable-scroll="true"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
:style="{ width: cropperOpt.width, height: cropperOpt.height }"
canvas-id="cropper"
></canvas>
JS代码
cropperOpt: {
id: 'cropper',
width: width,
height: height,
scale: 2.5,
zoom: 8,
cut: {
x: (width - 295) / 2,
y: (height - 413) / 2,
width: 295,
height: 413
}
}
属性
cropperOpt 属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
id | String | canvas-id的值 | |
width | Number | 750 | canvas的宽 |
height | Number | 750 | canvas的高 |
scale | Float | 2.5 | 比例 |
zoom | Number | 5 | 缩放倍数 |
cut | object | 裁剪框属性 |
cut 裁剪框属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
x | Number | 裁剪框X点 | |
y | Number | 裁剪框y点 | |
width | Number | 750 | 裁剪框的宽 |
height | Number | 750 | 裁剪框的高 |