兼容电脑版微信小程序canvas图片裁剪
image-cropper.wxml:
<view class="imageCropper">
<canvas class="canvas" canvas-id="myCanvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px">
<movable-area class="movableArea" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;">
<movable-view wx:if="{{src}}" style="width:{{cut1Width}}px;height:{{cut1Height}}px" class="movableBox" x="{{x}}" y="{{y}}" direction="all" bindchange="movableChange"></movable-view>
<image src="{{src}}" id="photo" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px"></image>
</movable-area>
</canvas>
<view class="footBox flex_around f30" style="background: none;"><view class="cf p30 box_b" bindtap="hide">取消</view><view class="cf p30 box_b" bindtap="cut">确定</view></view>
</view>
image-cropper.js
let common = getApp().globalData.commonFun
let util = getApp().globalData.utilFun
Component({
options: {},
properties: {},
options: {styleIsolation: "apply-shared"},
data: {
canvasHeight: 0,
canvasWidth: 0,
x: 0,
y: 0,
src: '',
cutWidth: 0,
cut1Width: 0,
cutHeight: 0,
cut1Height: 0,
aspectRatio: 0,
},
attached: function () {},
methods: {
async setPageData(res) {
//console.log(res)
let imgWidth = res.imgWidth,imgHeight = res.imgHeight,w = Number(imgWidth) / 2 * 0.7,h = Number(imgHeight) / 2 * 0.7,imgInfo = await this.singleImgInfo(res.imgSrc),ch = 0,cw = 0,x = this.data.x,y = this.data.y;
if (imgWidth == imgHeight) {
if (imgInfo.width >= imgWidth && imgInfo.height >= imgHeight) {
if (imgInfo.width > imgInfo.height) {
ch = Number(h) + 4;cw = Number(h) / Number(imgInfo.height) * Number(imgInfo.width);x = (cw - w) / 2 - 2;
} else {
cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height);y = (ch - h) / 2 - 2;
}
} else {
if (imgInfo.width < imgWidth && imgInfo.height >= imgHeight) {
if (imgInfo.width > imgInfo.height) {
ch = Number(res.imgHeight) + 4;cw = Number(res.imgHeight) / Number(imgInfo.height) * Number(imgInfo.width);x = (cw - w) / 2 / 2 - 42;
} else {
cw = Number(w) + 4;ch = Number(w) / Number(imgInfo.width) * Number(imgInfo.height);y = (ch - h) / 2 - 2;
}
} else if (imgInfo.width >= imgWidth && imgInfo.height < imgHeight) {
if (imgInfo.width > imgInfo.height) {
ch = Number(h) + 4;cw =
...