uni-app海报(合成图片)demo

<template><view class='page'><input type="text" value="" class="input" v-model="text" placeholder="请输入需要添加的文字" maxlength="5" /><button type="primary" @click='copyFn'>生成图片</button><canvas canvas-id="myCanvas" id='sss'></canvas><image :src="base64" mode="" v-if="base64" class='immm'></image><button type="primary" @click='bcFn' v-if="base64" >保存图片</button></view>
</template>

<script>export default {data() {return {text: '',base64:null}},methods: {copyFn() {let ww, hh;const query = uni.createSelectorQuery().in(this);query.select('#sss').boundingClientRect(data => {  //获取canvas-domww = data.width; //准确的宽高hh = data.heightvar ctx = uni.createCanvasContext('myCanvas') //绑定画布ctx.drawImage('../../static/132.png', 0, 0, ww, hh); //填充进图片ctx.setFillStyle('#000')  //设置内容1的文字样式ctx.setFontSize(30);ctx.setTextAlign('center')  //设置对于坐标点的对齐方式ctx.fillText(this.text,ww/2,hh/2+55) //计算距离，将文字定位于图片的某处ctx.setFillStyle('red')  //设置内容2的文字样式ctx.setFontSize(20);ctx.setTextAlign('center')  //同上ctx.fillText('我就试试',ww/2,hh/2+80)ctx.draw();  //输出到画布中uni.showLoading({ //增加loading等待效果mask:true})setTimeout(()=>{  //不加延迟的话，base64有时候会赋予undefineduni.canvasToTempFilePath({canvasId:'myCanvas',success: (res) => {this.base64=res.tempFilePath}})uni.hideLoading();},1200)}).exec();},bcFn(){uni.saveImageToPhotosAlbum({  //保存图片filePath:this.base64,  success: (res) => {uni.showToast({title:'保存成功',})}})}}}
</script>

.input {width: 100%;height: 80rpx;background: #ccc;
}#sss {position: absolute;width: 750rpx;height: 426rpx;top: -99999899rpx;left: -99999899rpx;z-index: 9999;
}
.immm {width: 750rpx;height: 426rpx;
}

uni-app海报(合成图片)demo相关推荐

php生成推广二维码海报、合成图片demo
php生成推广二维码海报.合成图片 1.海报背景图.背景图一般存服务器,程序本地读取: 2.推广二维码.可以是二维码图片链接,也可以是字符串图像流.如果自己生成二维码,详见phpqrcode官网,地址 ...
java 二维码与海报合成图片并上传至七牛云
简单的二维码与图片合成效果如下: 准备步骤: 第一步毋庸置疑准备图片第二步整合二维码项目依赖(这里我们使用的是google.zxing,当然市面上开源的二维码项目很多,你可自行选择) GitHub ...
指定类型和坐标系的海报合成图片vue-canvas-poster
该插件的优点如下:使用npm安装,简单易懂,功能强大,可以设置widthPixels设定图片尺寸,解决图片模糊问题功能特点: 绘制文本(换行.超出内容省略号.中划线.下划线.文本加粗.文字缩进) 绘 ...
php 合成图片微信公众号合成海报
php合成图片 <?php header("content-type:image/png"); date_default_timezone_set('Asia/Shangha ...
微信小程序canvas合成图片（海报）,生成的图片展示不出来，或者空白。
背景: 1.用户点击分享朋友圈,将二维码与一张背景图合成一张图片,然后将其显示. 2.用户点击保存图片将图片保存到手机相册里面. 问题: 用户点击分享盆友圈合成后的图片显示空白.控制台可以打印出来链接 ...
文字转图片，文字水印图片，合成图片，教你 Python 生成网站原创配图！
又是为站佬们服务(写)水文的一篇,如何应用python来生成或者说是合成自己的原创图片,适合各位站群大佬哥们生成自己的图片,避免没有配图或者侵权碰瓷的尴尬,当然本渣渣这里分享的仅仅是源码demo,后续 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
vue-drag-resize + html2canvas合成图片并下载
vue-drag-resize + html2canvas 合成图片并下载可以实现图片拖动,缩放,最后合成一个图片并且下载的功能一.下载 vue-drag-resize 和 html2canvas ...
PHP 合成图片并在图片上加文字
/*** Info: PHP把一张图片作为背景和另一张图片合成新图片*/public function createImage(){$path_1 = 'XXXXX/attachment/images ...
关于uni.appd打包H5 图片在IOS 上不显示的问题
最近在改前人的代码,上一任的前端用的是uni.app打包的H5页面,随后要增加一个定位的功能.....,一想也没什么困难的嘛,就开始写了,结果这才是噩梦的开始... 定位很快就写好了用的是uni. ...

uni-app海报(合成图片)demo

uni-app海报(合成图片)demo相关推荐

最新文章

热门文章