Uniapp 制作海报功能

<template><view><canvas class="can" canvas-id="mycan"></canvas><button @click="but">保存海报</button></view>
</template><script>export default {data() {return {backurl: '../../static/2bcd944a40e85a34f2e904f4461e163f.jpg' //本地背景图}},onShow: function(option) {var that = this// 邀请码接口请求uni.request({url: '******',data: {invite_code: *},header: {'content-type': '******'},method: 'POST',success: (e) => {// 获取当前系统的信息uni.getSystemInfo({success(res) {// 在画布绘制图像const ctx = uni.createCanvasContext('mycan')ctx.drawImage(that.backurl, 0, 0, res.windowWidth, res.windowHeight)ctx.drawImage(e.data, +res.windowWidth / 2 - 100, +res.windowHeight / 2 - 100, 200, 200)ctx.draw() //重绘页面}})}})},methods: {but() {var that = this// 获取用户的当前设置wx.getSetting({success(res) {if (!res.authSetting['scope.writePhotosAlbum']) {uni.showModal({title: '您还未授权相册权限',content: '点击确认授权',success(res) {if (res.confirm == true) {wx.authorize({scope: 'scope.writePhotosAlbum',})}}})} else {// 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径uni.canvasToTempFilePath({x: 0,y: 0,width: that.windowWidth * 1.22, // 截取的画布的宽height: that.windowHeight * 1.22, // 截取的画布的高destWidth: that.windowWidth * 1.22 * 3, // 保存成的画布宽度destHeight: that.windowHeight * 1.22 * 3, // 保存成的画布高度fileType: 'png', // 保存成的文件类型quality: 1, // 图片质量canvasId: 'mycan', // 画布IDsuccess(res) {// 保存图片至相册uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success() {uni.showToast({title: '图片保存成功',duration: 2000})}})}})}}})}}}
</script><style scoped>.can {width: 100vw;height: 100vh;}
</style>

Uniapp 制作海报功能相关推荐

微信小程序/uni-app生成海报功能@令狐张豪
使用技术栈:uni-app 使用官方文档提供的API:createCanvasContext(uni-app) /CanvasContext(原生) *注意:海报里用到的图片都得先使用小程序提供的下载 ...
uni-app制作海报并转发
实现这个效果的第一步这是要用到的函数 // 用于请求图片 uni.getImageInfo() // 获取画布uni.createCanvasContext("firstCanvas&qu ...
用 Python 快速制作海报级地图
作者:费弗里来源:Python大数据分析 1 简介基于Python中诸如matplotlib等功能丰富.自由度极高的绘图库,我们可以完成各种极富艺术感的可视化作品,关于这一点我在系列文章在模仿中精 ...
如何在PPT中用文本框制作海报？这个方法很简单，不信来看
PPT里还能用文本框制作海报,你知道吗?很多朋友可能觉得很诧异,一般大家做海报都是用PS来制作,可是PS的操作有点复杂,还是一个细致活,急躁的朋友可能做着做着就没耐心了,不过这个也不妨碍制作海报,直接 ...
计算机制作画报说课稿,运用word图文混排制作海报说课稿
尊敬的各位评委老师: 你们好!我是砀山二中的信息教师苏婷,今天,我说课的题目是<运用WORD图文混排制作海报>,选自广东教育出版社<信息技术基础>必修第三章信息加工与表达(上) ...
Java5分钟制作海报
一.需求背景我们经常在多终端应用开发中会遇到这样的需求:用户在浏览商品时觉得不错,希望分享给朋友.此时终端(安卓.苹果.H5等)生成一张精美的商品海报,通过微信或者其他途径分享给他人.也可能会遇到需 ...
H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
教你Java5分钟制作海报、彻底解决APP兼容性问题
教你Java5分钟制作海报.彻底解决APP兼容性问题一.需求背景我们经常在多终端应用开发中会遇到这样的需求:用户在浏览商品时觉得不错,希望分享给朋友.此时终端(安卓.苹果.H5等)生成一张精美 ...
Adobe Photoshop CC制作海报
开发工具与关键技术:使用Adobe Photoshop CC制作海报作者:成东平撰写时间:2019年1月28日所周知红色是代表喜庆的一种颜色而元旦是个非常喜庆的节日. 下图就是本人制作的元旦节的 ...

Uniapp 制作海报功能

Uniapp 制作海报功能相关推荐

最新文章

热门文章