UNI-APP 生成海报

页面部分

<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>

JS部分

<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>

CSS部分

.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 生成海报/DOM转图片相关推荐

小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
vue项目之H5 app 生成海报功能
一.需求本次[世纪盛典]活动,分为三期,每期都有海报相关的工作内容. 海报带有动态的个人信息.头像.证书编号及二维码等. 本次活动需要在微信h5.小程序.app里面正常启动. 二.经过网上查找使用 ...
python生成海报商品图片_如何优雅的生成海报/动态合成图片？
poster-generater ⚡⚡⚡海报生成器. 只需要一个简单的 json 配置即可生成你需要的海报... 说明此项目诞生有一段时间了,我本人也一直在使用这个程序,从一开始的 golang 版 ...
微信小程序--给头像添加logo（生成海报同理）
实现给图片添加logo或者生成海报,其原理是使用canvas,用canvas绘制出想要的图片进行保存 1.在wxml文件中添加canvas canvs层级太高,所以将它定位到屏幕外,不影响页面 < ...
小程序生成分享海报php配置,小程序生成海报保存分享图片完全指南（包括：头像，文字）...
业务在小程序中生成海报(包括用户头像和自定义文字)并且保存到本地实现思路利用canvas画布,把用户头像和自定义文字定位好,用户点击按钮保存到本地注意事项难点小程序canvas不支持自定义宽 ...
uni.uploadFile上传手机内部图片
背景介绍在开发uni app项目的时候,有一个需求是,将安卓原生插件返回的图片,上传到服务器中. uni app中提供了一个图片上传的api,官网api: uploadFile, 但是插件返回的图 ...
【Uni-App】点击分享，生成海报带二维码，保存到本地图片，写入文字
目录一:需求二:分析三:准备工作 1.qrcode准备 2.并且在main.js去挂载四:页面构建 1.html 2.data 3.js 二维码嵌入文字一:需求 1.产品需要这个商品,必须分 ...
uniapp app端使用html2canvas和renderjs实现生成海报图
uniapp app端使用html2canvas和renderjs实现生成海报图原本app端是无法使用html2canvas的因为,app端不支持浏览器js. 不过我在uniapp里面看到了rend ...
uni-app app端用highcharts绘制图表，并生成海报保存到手机相册
uni-app 打包app后 highcharts图表绘制不成功,不支持该方法,所以就考虑在app中嵌入webview h5页面,实现图表的绘制. 首先引用安装highcharts,封装成一个组件 n ...

UNI-APP 生成海报/DOM转图片

UNI-APP 生成海报

UNI-APP 生成海报/DOM转图片相关推荐

最新文章

热门文章