画布海报头像放进二维码里面

2024-01-30 14:08
文章标签 二维码 画布 里面 头像 海报 放进

本文主要是介绍画布海报头像放进二维码里面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

const app = getApp();Page({/*** 页面的初始数据*/data: {userInfo: {},isOverShare: true},/*** 生命周期函数--监听页面加载*/onLoad: async function(options) {await this.getUserInfo()this.csh()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},// 获取用户信息async getUserInfo() {let userInfo = await app.api.getUserInfo()this.setData({userInfo: userInfo});},// 生成分享海报// 初始化csh() {wx.showLoading({title: "海报绘制中..."});var that = this;// 获取设备宽高，以备海报全屏显示wx.getSystemInfo({success: function(res) {that.setData({windowW: res.windowWidth,windowH: res.windowHeight});}});// 海报背景图线上地址var url = "https://xianganzhu.oss-cn-chengdu.aliyuncs.com/images/poster/fx-bg.png";var i1 = false;// 商品图片（哪吒头像）线上地址// var urll = that.data.urlHeader;var i2 = true;// 小程序二维码var urlqCord = that.data.userInfo.share_qrcode;// 自己头像var urlavati = that.data.userInfo.avatarurlvar i3 = false;var aa = Promise.all([that.getBG(url), that.getBG(urlqCord), that.getBG(urlavati)]).then( res => {console.log(123 ,res)this.setData({bgpic: res[0],qCord: res[1],avait: res[2]})that.drawCanvas();})},isdrawCanvas(i1 = true, i2 = true, i3 = true) {var that = this;if (i1 == true && i2 == true && i3 == true) {that.drawCanvas();}},// 点击生成并保持海报到手机相册// 生成二维码// clickMe() {//   var that = this;//   that.setData({//     show: true//   });//   // setTimeout(() => {}, 3000);//   // that.drawCanvas();//   that.csh();// },// 绘制canvasdrawCanvas() {var that = this;var windowW = that.data.windowW;var windowH = that.data.windowH;var text = this.data.userInfo.nickname.length <= 5 ? '' : '...'var textName = (this.data.userInfo.nickname).slice(0, 5) + text// var text = '从不拘泥任何世俗凡人的目光，我要奔向前方那光芒，生而为魔，那又如何'// 使用 wx.createContext 获取绘图上下文 contextvar context = wx.createCanvasContext("firstCanvas");// 海报背景图// context.drawImage(that.data.bgpic, (windowW - 280) / 2, (windowH - 450) / 2, 280, 450)context.drawImage(that.data.bgpic,(windowW - 310) / 2,(windowH - 631) / 2,310,551);console.log('背景图', that.data.bgpic)// 商品图片// context.drawImage(//   that.data.propic,//   (windowW - 240) / 2,//   (windowH - 440) / 2,//   230,//   230// );// 商品文字描述// context.setFontSize(16);// context.setFillStyle("#2BA148");// context.fillText(//   "扫码立即加入湘安猪",//   (windowW - 200) / 2,//   (windowH + 55) / 2// );context.setFontSize(20)context.setFillStyle("#2BA148")context.fillText('我是' + textName, (windowW - 100) / 2, (windowH - 20) / 2)// 设置线条的起始路径坐标// context.moveTo((windowW + 45) / 2, (windowH + 44) / 2);// 设置线条的终点路径坐标// context.lineTo((windowW + 200) / 2, (windowH + 44) / 2);context.stroke(); //对当前路径进行描边// 商品名字，名字很长调用方法将文字折行，传参 文字内容text，画布context// var row = that.newLine(text, context)var a = 24; //定义行高25// for (var i = 0; i < row.length; i++) {//   context.setFontSize(16)//   context.setFillStyle("#000000")//   context.fillText(row[i], (windowW - 195) / 2, (windowH + 130) / 2 + a * i, 320)// }// 识别小程序二维码context.save();context.beginPath();context.arc(100 / 2 + (windowW - 85) / 2, 100 / 2 + (windowH + 70) / 2, 100 / 2, 0, Math.PI * 2, false);context.clip();context.drawImage(that.data.qCord,(windowW - 85) / 2,(windowH + 70) / 2,100,100);console.log('二维码', that.data.qCord)context.restore();// context.save();context.beginPath();context.arc(45 / 2 + (windowW - 30) / 2, 45 / 2 + (windowH + 125) / 2, 45 / 2, 0, Math.PI * 2, false);context.clip();context.drawImage(that.data.avait,(windowW - 30) / 2,(windowH + 125) / 2,45,45);console.log('头象', that.data.avait)context.restore();// context.save();//绘制头像// context.beginPath(); //开始绘制//先画个圆，前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针// context.arc(45 / 2 + (windowW - 30) / 2, 45 / 2 + (windowH + 115) / 2, 45 / 2, 0, Math.PI * 2, false);// context.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。// 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因// context.drawImage(that.data.avait, (windowW - 30) / 2, (windowH + 115) / 2, 45, 45);// context.restore();context.draw();wx.hideLoading();},// 点击保存按钮，同时将画布转化为图片daochu: function() {wx.showLoading({title: "制造中..."});var that = this;wx.canvasToTempFilePath({x: 0,y: 0,canvasId: "firstCanvas",fileType: "jpg",quality: 1,success: function(res) {that.setData({shareImage: res.tempFilePath});wx.hideLoading();setTimeout(function() {wx.showModal({title: "提示",content: "将生成的海报保存到手机相册，可以发送给微信好友或分享到朋友圈",success(res) {if (res.confirm) {that.eventSave();} else if (res.cancel) {console.log("用户点击取消");}}});}, 1000);},fail() {wx.hideLoading();wx.showToast({title: "制造失败",icon: "none",duration: 2000});}});},// 将商品分享图片保存到本地eventSave() {// console.log('保存图片', this.data.shareImage);wx.showLoading({title: "保存中..."});wx.saveImageToPhotosAlbum({filePath: this.data.shareImage,success(res) {wx.hideLoading();wx.showToast({title: "保存图片成功",icon: "success",duration: 2000});},fail() {wx.hideLoading();wx.showToast({title: "保存图片失败",icon: "none",duration: 2000});}});},//将线上图片地址下载到本地，此函数进行了封装，只有在需要转换url的时候调用即可getBG(url) {// Promise函数给我很大的帮助，让我能return出回调函数中的值return new Promise(function(resolve) {wx.downloadFile({url: url,success: function(res) {url = res.tempFilePath;resolve(url);}});});},// canvas多文字换行newLine(txt, context) {var txtArr = txt.split("");var temp = "";var row = [];for (var i = 0; i < txtArr.length; i++) {if (context.measureText(temp).width < 210) {temp += txtArr[i];} else {i--;row.push(temp);temp = "";}}row.push(temp);//如果数组长度大于3 则截取前三个if (row.length > 3) {var rowCut = row.slice(0, 3);var rowPart = rowCut[2];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (context.measureText(test).width < 180) {test += rowPart[a];} else {break;}}empty.push(test);var group = empty[0] + "..."; //这里只显示三行，超出的用...表示rowCut.splice(2, 1, group);row = rowCut;}return row;},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {return {// title: '做任务赢积分',path: "/pages/xiangan_home/home/home?uid=" + this.data.userInfo.uuid};}
});

这篇关于画布海报头像放进二维码里面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/660485。

相关文章

创建一个大的DIV，里面的包含两个DIV是可以自由移动

创建一个大的DIV，里面的包含两个DIV是可以自由移动

创建一个大的DIV，里面的包含两个DIV是可以自由移动 <body>         <div style="position: relative; background:#DDF8CF;line-height: 50px"> <div style="text-align: center; width: 100%;padding-top: 0px;"><h3>定&nbsp;位&nbsp;
阅读更多...
flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题 GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。 最近通过flutter build web，通过发布到GitHu
阅读更多...
运行.bat文件，如何在Dos窗口里面得到该文件的路径

运行.bat文件，如何在Dos窗口里面得到该文件的路径

把java代码打包成.jar文件，编写一个.bat文件，执行该文件，编译.jar包；（.bat，.jar放在同一个文件夹下） 运行.bat文件，如何在Dos窗口里面得到该文件的路径，并运行.jar文件： echo 当前盘符：%~d0 echo 当前路径：%cd% echo 当前执行命令行：%0 echo 当前bat文件路径：%~dp0 echo 当前bat文件短路径：%~sdp0 nc
阅读更多...
【python 图片识别】python识别图片是不是包含二维码

【python 图片识别】python识别图片是不是包含二维码

近几天在研究二维码的识别，主要是通过python代码来识别特定图片内是否包含二维码。方法有分类，还有下面我介绍的直接法。 需要安装库 pip install pyzbar pip install opencv-python 我们 先准备些二维码 总共有11个二维码。 下面我们进行二维码识别： # -*- coding: utf-8 -*-import osfrom pyzba
阅读更多...
Vue3实现点击按钮下载头像功能

Vue3实现点击按钮下载头像功能

要实现的效果 点击头像右上角弹出选项，点击保存图片可以把图片下载保存到本地 实现方式关键代码 1.第一种，直接创建a标签给头像地址。进行下载 // 创建一个隐藏的 <a> 标签const link = document.createElement("a");link.href = headPic; // 设置为图片的 URLlink.download = "avatar.jpg"; //
阅读更多...
PDF样本图册转换为一个二维码，随时扫码打开无需印刷

PDF样本图册转换为一个二维码，随时扫码打开无需印刷

在这个数字化时代，纸质样本图册已成为过去。如今，一切都变得触手可及，包括我们的PDF样本图册。想象一下，将这些图册转换为一个二维码，让客户随时扫码打开，无需印刷，这将带来多大的便利和环保效益！接下来就让我来教你如何轻松实现PDF样本图册到二维码的转换，让您与时俱进，走在环保科技的前沿吧。 1. 准备好制作工具：FLBOOK在线制作电子杂志平台 2. 转换文档：点击开始
阅读更多...
影响画布微信小程序canvas及skyline和webview用户界面布局的关键流程

影响画布微信小程序canvas及skyline和webview用户界面布局的关键流程

影响微信小程序画布canvas及skyline和webview用户界面布局的关键流程 目录 影响微信小程序画布canvas及skyline和webview用户界面布局的关键流程 一、微信小程序canvas开发流程 1.1、官方指南 1.2、客制化开发 第一步：在 WXML 中添加 canvas 组件 第二步：获取 Canvas 对象和渲染上下文 第三步 画布#ID选择器执行回调——
阅读更多...
＜数据集＞二维码识别数据集＜目标检测＞

＜数据集＞二维码识别数据集＜目标检测＞

数据集格式：VOC+YOLO格式 图片数量：1601张 标注数量(xml文件个数)：1601 标注数量(txt文件个数)：1601 标注类别数：1 标注类别名称：['QR'] 序号类别名称图片数框数1QR16016286 使用标注工具：labelImg 标注规则：对类别进行画水平矩形框 图片示例： 标注示例：
阅读更多...
JS生成二维码QRCode代码

JS生成二维码QRCode代码

JavaScript是一种广泛使用的前端编程语言，它不仅用于网页交互，还可以实现许多实用功能，如生成二维码。本篇文章将深入探讨如何使用JavaScript生成二维码，以及如何确保这种生成的二维码在各种浏览器和手机端都能正常工作，并支持包含中文内容。 1. 引入库：    首先，你需要在你的HTML文件中引入 `qrcode.js` 库。你可以从GitHub上的[qrcode.js仓库](ht
阅读更多...
【HarmonyOS】头像圆形裁剪功能之手势放大缩小，平移，双击缩放控制（三）

【HarmonyOS】头像圆形裁剪功能之手势放大缩小，平移，双击缩放控制（三）

【HarmonyOS】头像裁剪之手势放大缩小，平移，双击缩放控制（三） 一、DEMO效果图： 二、开发思路： 使用矩阵变换控制图片的放大缩小和平移形态。 通过监听点击手势TapGesture，缩放手势PinchGesture，拖动手势PanGesture进行手势操作的功能实现。 通过对矩阵变换参数mMatrix的赋值，将矩阵变换参数赋值给image控件。实现手势操作和图片操作的同步。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2