前言

这几天工作比较轻松，所以就有时间发下呆，突然想起前段时间用了一个九宫格切图软件，所以就自己试着开发下，期间不少问题也是问领导的，领导知道我在摸鱼但也很耐心帮我（受宠若惊），所以在这里谢谢他。

上传图片

  handleUpload(): void {uni.chooseImage({sizeType: ['original'],success: (chooseImageRes) => {this.url = chooseImageRes.tempFilePaths[0];uni.showToast({title: '上传成功',icon: 'none',duration: 1000,});},});}

调用uniapp的选择图片api选取图片，然后获取本地图片路径。

展示图片

<view v-if="url" class="l-content__img-box"><image class="l-content__img" :src="url"></image>
</view>

上传图片之后，用获取到的本地图片路径在页面上展示出来。

画布

1.在页面中写好九个画布，每个画布必须有canvas-id

<view><view>九宫格</view><view class="l-canvases"><canvasv-for="index in 9":canvas-id="'c' + index":key="index":style="getCanvasStyle(index)"@click="handleDownload(index)"></canvas></view>
</view>

2.每个画布都代表图片的一部分，接下来，我们把图片在canvas里渲染出来.

drawImage(url, dx, dy, dWidth, dHeight)

笔者对drawImage的理解：

dx，dy：切图的位置，比如说（0，0）即为左上角的位置，（-200， -200）为右下角的位置。

dWidth，dHeight：设置整张图片在画布中的大小。此例为（300,300）

代码如下：

/** 图片每个canvas以及图片的大小 */
protected interval = 100;handleShow(): void {const c1 = uni.createCanvasContext('c1');c1.drawImage(this.url, 0, 0, this.interval * 3, this.interval * 3);c1.draw();const c2 = uni.createCanvasContext('c2');c2.drawImage(this.url, -this.interval, 0, this.interval * 3, this.interval * 3);c2.draw();const c3 = uni.createCanvasContext('c3');c3.drawImage(this.url, -this.interval * 2, 0, this.interval * 3, this.interval * 3);c3.draw();const c4 = uni.createCanvasContext('c4');c4.drawImage(this.url, 0, -this.interval, this.interval * 3, this.interval * 3);c4.draw();const c5 = uni.createCanvasContext('c5');c5.drawImage(this.url, -this.interval, -this.interval, this.interval * 3, this.interval * 3);c5.draw();const c6 = uni.createCanvasContext('c6');c6.drawImage(this.url,-this.interval * 2,-this.interval,this.interval * 3,this.interval * 3,);c6.draw();const c7 = uni.createCanvasContext('c7');c7.drawImage(this.url, 0, -this.interval * 2, this.interval * 3, this.interval * 3);c7.draw();const c8 = uni.createCanvasContext('c8');c8.drawImage(this.url,-this.interval,-this.interval * 2,this.interval * 3,this.interval * 3,);c8.draw();const c9 = uni.createCanvasContext('c9');c9.drawImage(this.url,-this.interval * 2,-this.interval * 2,this.interval * 3,this.interval * 3,);c9.draw();}

下载图片

通过点击图片让用户自行下载（┓( ´∀` )┏懒）,废话不多说直接上代码：

handleDownload(index: number): void {uni.canvasToTempFilePath({canvasId: `c${index}`,fileType: 'png',success: (res) => {// 在H5平台下，tempFilePath 为 base64const url = res.tempFilePath;uni.previewImage({urls: [url] || [],current: url || '',});},fail: (res) => {console.log('failRes->', res);},},this,);}

最终效果

样式就没认真去做了，实现功能就行了（懒癌犯了），还请各位见谅。

直接上图：

总结

以上就是本文的所有内容啦，如有什么问题，请大佬们在评论区指正，蟹蟹大家！咱们将在下篇文章中见~