uniapp canvas绘图生成海报

组件：tki-qrcode.vue 交流群：836383650

<template><view class="content"><button type="primary" @tap="saveToAlbum">保存</button><view class="post"><tki-qrcode ref="qrcode" :val="val" :size="200" background="#fff" foreground="#000" pdground="#000" :onval="false":loadMake="false" @result="qrR" :show="false"></tki-qrcode><view class="wrapper"><canvas style="height: 100%;width: 100%;backgroundColor: #FFFFFF" canvas-id="firstCanvas"></canvas></view></view></view>
</template><script>import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';export default {name: 'canvas-drawer',components: {tkiQrcode},data() {return {val: 'https://www.baidu.com',cover: '../../static/cabin01.png'};},onLoad() {},methods: {qrR(path) {let that = this;this.qr_path = path;let system_info = uni.getSystemInfoSync();let ctx = uni.createCanvasContext('firstCanvas');uni.getImageInfo({src: that.cover,success(res) {console.log(res.path);ctx.drawImage(res.path, 0, 0, 375, uni.upx2px(1020));let linearGrad = ctx.createLinearGradient(0, 0, 800, 0);linearGrad.addColorStop('0.25', '#8b00d2');linearGrad.addColorStop('0.5', '#003fb3');linearGrad.addColorStop('0.75', '#ff3ef0');ctx.fillStyle = '#FFFFFF';ctx.fillRect(uni.upx2px(500), uni.upx2px(790), uni.upx2px(200), uni.upx2px(210));ctx.drawImage(path, uni.upx2px(520), uni.upx2px(800), uni.upx2px(160), uni.upx2px(160));ctx.font = '13px Arial';ctx.fillStyle = '#000';ctx.fillText('长按保存二维码', uni.upx2px(508), uni.upx2px(990));ctx.draw(false, () => {uni.canvasToTempFilePath({x: 0,y: 0,width: 375,height: uni.upx2px(1020),destWidth: 375,destHeight: uni.upx2px(1020),canvasId: 'firstCanvas',success: function(res) {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function() {console.log('save success');}});},fail(e) {console.log(e);uni.showToast({title: '生成海报失败',icon: 'none'});}});});},fail(error) {console.log(error);}});},saveToAlbum() {this.$refs.qrcode._makeCode();}}};
</script><style lang="scss">.post {height: 100%;background-color: #f4f4f4;.wrapper {height: 1020rpx;display: flex;justify-content: center;align-items: center;margin-top: 50upx;}}
</style>

uniapp canvas绘图生成海报相关推荐

uniapp中自定义生成海报图片
uniapp中自定义生成海报图片效果示例图效果示例图 ##代码块 <template><view class="cardPoster-wrap">< ...
记一次微信小程序canvas 2d 生成海报问题
因项目需要,需要制作海报分享. 如: 事情总是不是那么顺利,canvas生成海报生成中遇到各种奇葩问题.一开始是 wx.canvasToTempFilePath 中获取不到canvas对象,调用返回 ...
微信小程序，使用canvas画图生成海报并保存手机相册
需求:需要根据背景图片和用户的微信的头像和昵称,生成一张海报图,并保存到手机相册. 首先在画布上绘制海报背景图片,然后再绘制头像.昵称和挑战成功的信息. 代码如下: getImageInfo() {r ...
uniapp 截图或者生成海报
需求:uniapp移动端需要生成一张当前界面的海报方案一:类似于手机按钮截图效果.实现代码如下: doSaveScreen() { let $this = this; ...
uni-app 使用html2canvas生成海报，一步到位
ps: 如果图片存在跨域问题,请现在后台配置解决图片跨域问题; app不能操作dom,所以app使用renderJS处理示例在最后步骤分为三步 1.安装html2canvas npm i html ...
canvas前端生成海报、二维码、截取节点生成图片
前言在最近的项目中,有一个需求是要保存前端生成的二维码,同时需要在二维码上方显示课程名称或者活动名称,下方显示机构名称这次前端分为PC管理端和uniapp移动端 PC端计划使用qrcode生成二维 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈
uniapp项目中使用canvas生成海报并保存.微信分享.发送至朋友圈 1.html <canvas canvas-id="poster&qu ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...

uniapp canvas绘图生成海报

uniapp canvas绘图生成海报相关推荐

最新文章

热门文章