极客观点
项目管理
HarmonyOS
代码稍长，还请大佬们担待
wxml
<view class="Jigsaw_modal" wx:if="{{visible}}">
<view class="modal_content" style="position: relative;">
<view class="modal_top">
一键拼图
</view>
<canvas type="2d" id='MyCanvas' class="modal_middle" style="position: absolute;z-index: -1;"></canvas>
<view class="modal_middle">
<view class="desc_text">
<image src="{{teethIcon}}" mode="" />
<text>齿刻美 · 打造专属笑容</text>
</view>
<view class="desc_content">
<view>
<image src="{{beforeImage}}" mode="" />
<text>设计前</text>
</view>
<image class="vs_image" src="{{vsImage}}" mode="" />
<view>
<image src="{{afterImage}}" mode="" />
<text>设计后</text>
</view>
</view>
</view>
<view class="modal_footer" bind:tap="initCanvas">
保存拼图
</view>
</view>
<view class="close_icon" bind:tap="handleCloseJigsawModa">
<image src="{{closeIcon}}" mode="" />
</view>
</view>wxjs
initCanvas() {
const canvasQuery = wx.createSelectorQuery();
canvasQuery.select('#MyCanvas')
.fields({
node: true,
size: true,
rect: true
})
.exec(res => this.CanvasInit(res));
},
CanvasInit(res) {
console.log(res, '-----------');
const width = res[0].width;
this.canvasWidth = width;
const height = res[0].height;
this.canvasHeight = height;
const canvas = res[0].node;
this.canvas = canvas;
const ctx = canvas.getContext('2d');
// 适应各种屏幕
const dpr = wx.getSystemSetting().pixelRatio;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
ctx.save()
// 绘制背景颜色
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, width, height);
ctx.restore()
// 初始化计数器为需要加载的图片数量
let imageLoadCount = 4;
// 绘制文字和图标部分
ctx.save();
ctx.beginPath();
ctx.font = '22rpx';
ctx.fillStyle = 'rgba(57, 77, 163, 1)';
ctx.fillText('记录美好生活', width - 150, 40);
ctx.translate(width - 50, 40);
const teethImg = canvas.createImage();
teethImg.src = this.data.teethIcon;
teethImg.onload = () => {
ctx.drawImage(teethImg, -15, -15, 30, 30);
imageLoadCount--;
};
ctx.restore();
// 绘制设计前部分
ctx.save();
ctx.beginPath();
ctx.translate(0, 60);
const beforeImg = canvas.createImage();
beforeImg.src = this.data.afterImage;
beforeImg.onload = () => {
ctx.drawImage(beforeImg, 0, 0, width / 3, 390);
ctx.font = '22rpx';
ctx.fillStyle = 'rgba(57, 77, 163, 1)';
ctx.fillText('设计前', width / 6, 390 + 20);
imageLoadCount--;
};
ctx.restore();
// 绘制对比图标
ctx.save();
ctx.beginPath();
ctx.translate(width / 2, 200);
const vsImg = canvas.createImage();
vsImg.src = this.data.vsImage;
vsImg.onload = () => {
ctx.drawImage(vsImg, 0, 0, 50, 60);
imageLoadCount--;
};
ctx.restore();
// 绘制设计后部分
ctx.save();
ctx.beginPath();
ctx.translate(width * 2 / 3, 60);
const afterImg = canvas.createImage();
afterImg.src = this.data.afterImage;
afterImg.onload = () => {
ctx.drawImage(afterImg, 0, 0, width / 3, 390);
ctx.font = '22rpx';
ctx.fillStyle = 'rgba(57, 77, 163, 1)';
ctx.fillText('设计后', width * 5 / 6, 390 + 20);
imageLoadCount--;
};
ctx.restore();
// 检查图片加载完成状态
const checkDrawingComplete = setInterval(() => {
if (imageLoadCount === 0) {
clearInterval(checkDrawingComplete);
// 获取用户保存图片权限
wx.getSetting({
success: (res) => {
if (['scope.writePhotosAlbum'] in res.authSetting) {
// 如果授权过且同意了
if (res.authSetting['scope.writePhotosAlbum']) {
this.canvasToImgSave();
} else {
wx.showModal({
title: "请求授权相册存储",
content: "需要获取您的相册存储权限，请确认授权",
success: (resModal) => {
if (resModal.confirm) {
wx.openSetting({
success: (resSetting) => {
this.canvasToImgSave();
},
fail: (err) => {
console.log(err);
}
});
} else if (resModal.cancel) {
console.log("你又取消了");
}
}
});
}
} else {
this.canvasToImgSave();
}
},
fail: (err) => {
console.log(err);
}
});
}
}, 100);
},
canvasToImgSave() {
wx.showLoading({
title: '生成中...',
});
setTimeout(() => {
wx.canvasToTempFilePath({
canvas: this.canvas,
x: 0,
y: 0,
width: this.canvasWidth * 2,
height: this.canvasHeight * 2,
destWidth: this.canvasWidth * 2,
destHeight: this.canvasHeight * 2,
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (resSave) => {
wx.showModal({
title: "保存成功！",
content: "图片已保存到本地相册",
showCancel: false,
success: (resModal) => {
}
});
},
fail: (err) => {
console.log(err);
}
});
},
fail: (err) => {
console.log(err);
},
complete: () => {
wx.hideLoading()
}
});
}, 1000)
},
修正代码
以下是修正后的代码，确保 beforeImg 使用正确的图片来源，确保设备像素比使用正确的 API，并修正检查权限的 if 条件：
WXML
JavaScript