uni-app 利用canvas画简单海报并保存图片

一、效果图

二、代码

<template><view class="canvas-box"><canvas  class="canvas" :style="{width:`${canvasData.image_Width}px;`,height:`${canvasData.image_Height}px;`}" canvas-id="canvasID"></canvas><view class="footer"><view class="preservationBtn" @click="saveImage">保存到相册</view></view></view>
</template><script>export default {data() {return {imgUrl: '',statusBarHeight: 0,avatar :'../../static/blue.webp', //头像地址erweima:'../../static/erweima.webp',//二维码canvasData:{image_Width:0,image_Height:0}}},onLoad() {let ctx = uni.createCanvasContext('canvasID', this);uni.getImageInfo({src: 'https://img0.baidu.com/it/u=3269595841,4171123021&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500', //网络图片用来做背景success: (res) => {// console.log(res);this.canvasData.image_Width = res.widththis.canvasData.image_Height = res.heightctx.save()ctx.drawImage(res.path, 0, 0, this.canvasData.image_Width, this.canvasData.image_Height)ctx.draw(true)ctx.save()this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像ctx.setFontSize(18)ctx.setFillStyle("#ffffff")ctx.fillText('哆啦A梦没口袋', 98, 65)ctx.font = '20px normal'ctx.setFillStyle("#09CFB1")ctx.fillText('伴我同行', 30, 122)ctx.setFillStyle("#09CFB1")ctx.fillText('一路前行', 60, 150)ctx.fillStyle = "#2C405A";ctx.fillRect(154,358,96,96); ctx.drawImage(this.erweima, 154,356,96,96) //二维码ctx.draw(true, setTimeout(() => {uni.canvasToTempFilePath({ //将canvas生成图片x: 0,y: 0,width: 281,height: 500,destWidth: 281, //截取canvas的宽度destHeight: 500, //截取canvas的高度canvasId: 'canvasID',success:(res)=> {console.log('res.tempFilePath==========', res.tempFilePath)this.imgUrl = res.tempFilePath},fail:(err)=> {console.log(err)}})}, 500))},})},methods: {//点击保存到相册saveImage() { var _this = this;uni.saveImageToPhotosAlbum({filePath: _this.imgUrl,success() {uni.showToast({title: "图片已保存图片到相册",icon: 'none',duration: 2000})},fail() {uni.hideLoading()uni.showModal({content: '检测到您没打开获取信息功能权限，是否去设置打开？',confirmText: "确认",cancelText: '取消',success: (res) => {if (res.confirm) {uni.openSetting({success: (res) => {console.log(res);uni.showToast({title: "请重新点击分享保存图片～",icon: "none"});}})} else {uni.showToast({title: "保存失败，请打开权限功能重试",icon: "none"});}}})}})},// 绘制圆形头像drawCircular(ctx, url, x, y, width, height) {//画圆形头像let avatarurl_width = width;let avatarurl_heigth = height;let avatarurl_x = x;let avatarurl_y = y;ctx.save(); //先保存状态，已便于画完园再用ctx.beginPath(); //开始绘制ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);ctx.setFillStyle("#FFFFFF")ctx.fill() //保证图片无bug填充ctx.clip(); //剪切ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片ctx.restore();},}}
</script>
<style lang="scss">.canvas-box {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;background-color: #2C405A;image{margin-top: 40rpx;}.canvas{margin-top: 40rpx;}.footer {margin-top: 40rpx;display: flex;align-items: center;justify-content: space-between;justify-content: center;.preservationBtn {margin-bottom: 40rpx;border: 1rpx solid #ffffff;color: #ffffff;display: flex;align-items: center;padding: 20rpx 40rpx;text-align: center;font-size: 30rpx;border-radius: 40rpx;}}}
</style>

uni-app 利用canvas画简单海报并保存图片相关推荐

在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
html5制作线路图,HTML5使用canvas画简单电路图
何问起 var canvas = document.getElementById("canHewenqi"); var cxt = canvas.getContext(" ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
uin-app 使用canvas画简易海报
1 canvas画圆角并把图片放进去 uni.downloadFile({url:that.user.url,//图片为网络图片必须要下载到本地获取到图片的临时路径success: function ...
关于利用canvas画带箭头的直线旋转
利用canvas在Vue项目中使用: <imgid="range_right"src=""style="position: absolute;l ...
uniapp微信小程序canvas生成简单海报并下载
今天项目接到个任务,就是手写canvas海报,并能下载图片.百度了很多海报组件,都不尽人意.萌生了自己手写海报的想法. 话不多说先贴文档 uni-app官网其实该文档和微信小程序类似最终效果,微信 ...
canvas画简单的横向流程图
开发思路最近,因为在做基于MES系统进行工业互联网开发的项目:其中,在做demo时,我负责工序管理的开发,其中有一个功能是通过一个物料SFC码可以追踪该物料所经历的所有工序:网上有很多插件,比如D3 ...
Android利用canvas画各种图形
为什么80%的码农都做不了架构师?>>> 1.首先说一下canvas类: Class Overview The Canvas class holds the "dra ...

uni-app 利用canvas画简单海报并保存图片

一、效果图

二、代码

uni-app 利用canvas画简单海报并保存图片相关推荐

最新文章

热门文章