uniapp vue3 使用canvas绘制图片
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需要注意如果使用popup这种控制显示隐藏的话,canvas只有第一次才会显示,第二次popup显示后canvas不显示了解决方案使用v-if控制canvas显示
简单实例
<canvas @longpress="onLongPress" v-if="model" canvas-id="posterCanvas" :style="{ width: config1.canvasWidth+'rpx', height: config1.canvasHeight+'rpx' }" class="canvas"></canvas>
<view class="colse">
const sercanvas=()=>{
// 绘制背景
// 开始绘制
uni.showLoading({
title:"绘制中..."
})
ctx.value=uni.createCanvasContext('posterCanvas')
const context=ctx.value
// context.setStrokeStyle("#00ff00")
// 绘制背景色
// 开始绘制
context.beginPath()
context.setFillStyle('#fff')
context.fillRect(0, 0, 690, 1180)
context.fill()
context.beginPath()对当前路径中的内容进行填充
context.drawImage(s2.value,15,10,300,320)
context.beginPath()
context.fill()
context.beginPath()
context.drawImage(s1.value,110,340,100,100)
context.fill()
// 设置文字
context.beginPath()
context.fillStyle = "#000";
context.font = "20px sans-serif";
context.fillText("长按图片保存相册", 80, 470);
// context.setFontSize("20px")
context.fill()
context.draw()
context.save()
uni.hideLoading()
// ctx.rect(0, 0, config1.value.canvasWidth/config1.value.ratio, config1.value.canvasHeight/config1.value.ratio)
// ctx.setFillStyle('#fff')
// ctx.fill()
// ctx.draw()
}
// 保存
const onLongPress=async ()=>{
// baocu保存图片先检测权限是否打开
let result = await permision.showAuthTipModal("android.permission.READ_EXTERNAL_STORAGE")
if(result){
uni.canvasToTempFilePath({
canvasId: 'posterCanvas',
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
console.log(res.tempFilePath)
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success: function() {
uni.showToast({
icon: 'none',
position: 'bottom',
title: "已保存到系统相册",
})
}
})
}
})
}
}
GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)