微信小程序输入文字用canvas生成公章并转为图片

<input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany" value="{{company}}" />
<canvas type="2d" id="circleBar" style="width: 400rpx;height:400rpx;margin: 30rpx auto;"></canvas>
<button type="primary" bindtap="comCreateSeal">生成公章</button>

Page({data: {company: "",//name: "专用章"},onShow() {},// 请输入公司名bindInputCompany(e) {this.setData({company: e.detail.value.trim()})},// 生成公章comCreateSeal() {if (!this.data.company) {wx.showToast({title: '请输入公司名称',icon: 'none',})return}var context1 = wx.createCanvasContext('circleBar');console.log(context1);const opts = {company: this.data.company, // 机构名称companyTight: false, // 公司名称是否紧凑(//false 散开型   true紧凑)//name: this.data.name}this.createSelectorQuery().select('#circleBar').fields({node: true,size: true,}).exec((res) => {console.log(res)const canvas = res[0].node;const context = canvas.getContext('2d');context.fillStyle = 'rgba(255, 255, 255, 0)';// 绘制印章边框canvas.width = res[0].widthcanvas.height = res[0].heightconst width = canvas.width / 2;const height = canvas.height / 2;context.lineWidth = 3;context.strokeStyle = "#f00";context.beginPath();context.arc(width, height, 78, 0, Math.PI * 2);context.stroke();context.save();//画五角星context.save();context.fillStyle = "#f00";context.translate(width, height); //移动坐标原点context.rotate(Math.PI + 0); //旋转context.beginPath(); //创建路径var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI / 5 * 4;for (var i = 0; i < 5; i++) { //画五角星的五条边var x = Math.sin(i * dig);var y = Math.cos(i * dig);context.lineTo(x * 25, y * 25);}context.closePath();context.stroke();context.fill();context.restore();// 绘制印章名称context.font = '18px Helvetica';context.textBaseline = 'middle'; //设置文本的垂直对齐方式context.textAlign = 'center'; //设置文本的水平对对齐方式context.lineWidth = 1;context.fillStyle = '#f00';// context.fillText(opts.name,width,height+53);// 绘制印章单位context.translate(width, height); // 平移到此位置,var count = opts.company.length; // 字数if (count > 14) {var maxCount = 18;context.font = '16px Helvetica'if (opts.companyTight) {var angle = 4 * Math.PI / 51; // 字间角度} else {var angle = 4 * Math.PI / (3 * (count - 1)); // 字间角度}} else {var maxCount = 14;context.font = '20px Helvetica'if (opts.companyTight) {var angle = 4 * Math.PI / 39; // 字间角度} else {var angle = 4 * Math.PI / (3 * (count - 1)); // 字间角度}}var chars = opts.company.split("");var c;for (var i = 0; i < count; i++) {c = chars[i]; // 需要绘制的字符if (i == 0) {if (opts.companyTight) {context.rotate(5 * Math.PI / 6 + angle * ((maxCount - count) / 2));} else {context.rotate(5 * Math.PI / 6);}} else {context.rotate(angle);}context.save();context.translate(64, 0); // 平移到此位置,此时字和x轴垂直context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴context.fillText(c, 0, 5); // 此点为字的中心点context.restore();}wx.canvasToTempFilePath({canvasId: 'circleBar',canvas: canvas,x: 0,y: 0,width: 260,height: 260,destWidth: 260,destHeight: 260,success(res) {console.log('图片临时路径：', res.tempFilePath)},fail(res) {console.error(res)}})})},
});

微信小程序输入文字用canvas生成公章并转为图片相关推荐

微信小程序踩坑记录 ------- canvas 生成带小程序码的微信朋友圈分享图
最近做了一个问卷类的小程序,其中的结果页想让用户进行朋友圈分享转发,网上搜索资料,得出解决思路,用 canvas 将页面绘制生成图片,然后保存到手机相册,最终效果如下: 在这里我只写页面里关于 can ...
微信小程序点击按钮弹窗生成二维码图片+长按识别
框架:uni-app 库:Painter ui框架:uView 1.X <u-modal class="show-close" v-model="showClose ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
微信小程序：爱情保证书制作生成
这是一款开启保证数生成制作的一款小程序支持一键生成情侣爱情保证图只需输入你和另一半姓名,再加上时间即可一键生成然后长按就可以保存了安装方法: 使用微信开发者工具打开源码然后提交上传审核就可 ...
微信小程序子组件使用canvas无效，线条画不出颜色
微信小程序子组件使用canvas无效,线条画不出颜色小程序中在page中直接使用canvas是这样使用的: // canvas 全局配置 var context = null; Page({data ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序输入车牌号（有新能源）
微信小程序输入车牌号(有新能源) <view class="page"><view class="carN ...
微信小程序：流量主制作生成装逼工具
这是一款流量主制作生成小工具支持小程序流量主图制作生成也支持公众号的流量主制作生成每一种制作都包含了所有的流量主模式用户自己填写选择制作就可以了! 小程序源码下载地址: 微信小程序:流量主制作 ...
小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...

微信小程序输入文字用canvas生成公章并转为图片

微信小程序输入文字用canvas生成公章并转为图片相关推荐

最新文章

热门文章

微信小程序 输入文字用canvas生成公章并转为图片

微信小程序 输入文字用canvas生成公章并转为图片相关推荐

最新文章

热门文章

微信小程序输入文字用canvas生成公章并转为图片

微信小程序输入文字用canvas生成公章并转为图片相关推荐