用canvas实现九宫格切图:教学uni-app+ts
前言
这几天工作比较轻松,所以就有时间发下呆,突然想起前段时间用了一个九宫格切图软件,所以就自己试着开发下,期间不少问题也是问领导的,领导知道我在摸鱼但也很耐心帮我(受宠若惊),所以在这里谢谢他。
上传图片
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">
<canvas
v-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 为 base64
const url = res.tempFilePath;
uni.previewImage({
urls: [url] || [],
current: url || '',
});
},
fail: (res) => {
console.log('failRes->', res);
},
},
this,
);
}
最终效果
样式就没认真去做了,实现功能就行了(懒癌犯了),还请各位见谅。
直接上图:
总结
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgggibb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13