小程序使用canvas标签生成海报并保存图片

先说一下做功能前的感受，简直一脸懵逼，第一次用canvas，只知道是个画布，其余什么都不知道…琢磨了一天才画出来…
开始之前百度了很久，想看看别人怎么写的，但是目前网上基本上用的都是wx.createCanvasContext这个api，但是这个api已经停止维护了，要求使用canvas代替，

 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html
上面是官方文档的出处，只好开始硬怼canvas文档，言归正传，下面是我的代码。
第一步是先创建canvas标签；
 

<canvas wx:if="{{isshow}}" type="2d" id="Canvas" canvas-id="Canvas" style="width: {{ windowW }}px; height: {{ windowH }}px;"></canvas>

第二步是获取手机系统信息，拿到手机屏幕的宽高以及设备像素比

  getSystemInfo() {let that = thiswx.getSystemInfo({success: function (res) {console.log(res);that.setData({windowW: res.windowWidth,windowH: res.windowHeight,pixelRatio: res.pixelRatio})},})},

第三步是拿到canvas对象实例返回用于在画布上的环境，这里拿canvas节点实例用到wx.createSelectorQuery()这个api，拿到画布后就可以开始插入图片，绘制矩形等操作，这里要注意小程序要先缩放画布，如果不缩放，会导致画布过大不适应手机屏幕，canvas的像素单位是px，所以不能自适应屏幕，需要做换算，我换算的原理是设计稿的宽度是750，所以我按照设计稿的宽度进行换算，后来听我师傅说用rem也可以，但是懒得换了，就没换了哈哈哈。
 

  createcanvas: function () {this.setData({isshow: true})let that = this,windowW = that.data.windowW,windowH = that.data.windowH;const query = wx.createSelectorQuery() //获取对象实例query.select('#Canvas') //选择获取canvas对象实例.fields({ //获取节点的相关信息。需要获取的字段在fields中指定。node: true,size: true}).exec((res) => {console.log(res);const canvas = res[0].node //拿到canvas对象that.setData({ //这里保存canvas对象是因为下面保存相片要用这个对象canvas})const ctx = canvas.getContext('2d') //返回用于在画布上绘图的环境const dpr = that.data.pixelRatio //拿到设备像素比canvas.width = res[0].width * dpr //缩放画布canvas.height = res[0].height * dprctx.scale(dpr, dpr)//1、绘制背景图(本地图片)const imgbg = canvas.createImage()imgbg.onload = (e) => {console.log(1);ctx.drawImage(imgbg, 0.133 * windowW, (windowW - 100) * 0.2, (windowW - 100), (windowW - 100) * 1.38) //50//绘制上半部内容背景区域that.roundRect(ctx, 0.16 * windowW, (windowW - 100) * 0.25, (windowW - 122), (windowW - 100) * 0.89, 8, '#fff') // 59//绘制下半部内容背景区域that.roundRect(ctx, 0.16 * windowW, (windowW - 100) * 1.19, (windowW - 122), (windowW - 100) * 0.33, 8, '#fff') //59//2、绘制商品图片及文字const imggood = canvas.createImage()imggood.onload = (e) => {console.log(2);ctx.drawImage(imggood, 0.205 * windowW, (windowW - 100) * 0.28, (windowW - 154), (windowW - 100) * 0.61)//设置文字let str = '50元购100元代金券，任何商品可使用。具体解释权归商场所有。'let chr = str.split(""); //这个方法是将一个字符串分割成字符串数组let temp = "";let row = [];ctx.font = "12px";ctx.fillStyle = "#313648";// console.log(ctx.measureText(str)); //查看文本长度//如果文字过长设置为两行for (let a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < (windowW - 184)) {temp += chr[a];} else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp);if (row.length > 2) {let rowCut = row.slice(0, 2);let rowPart = rowCut[1];let test = "";let empty = [];for (let a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < (windowW - 184)) {test += rowPart[a];} else {break;}}empty.push(test);let group = empty[0] + "..." //这里只显示两行，超出的用...表示rowCut.splice(1, 1, group);row = rowCut;}for (let b = 0; b < row.length; b++) {// console.log(row[b]);ctx.fillText(row[b], 0.23 * windowW, (windowW - 100) * 1 + b * 20); //85}//3、绘制底部数据const imgava = canvas.createImage()imgava.onload = (e) => {console.log(3);//绘制头像ctx.drawImage(imgava, 0.24 * windowW, (windowW - 100) * 1.24, windowW * 0.06, windowW * 0.06) // 90//绘制微信名ctx.font = "12px";ctx.fillStyle = "#313648";ctx.fillText('梅梅', 0.333 * windowW, (windowW - 100) * 1.29); //125}imgava.src = '../../images/phone.png'//4、绘制抢购价图片const imgqgj = canvas.createImage()imgqgj.onload = (e) => {console.log(4);//绘制头像ctx.drawImage(imgqgj, 0.24 * windowW, (windowW - 100) * 1.35, 0.101 * windowW, 0.04 * windowW) //90//绘制价格ctx.font = "14px sans-serif";ctx.fillStyle = "#e62e0a";ctx.fillText('￥98.00', 0.368 * windowW, (windowW - 100) * 1.395); //138//绘制喜欢的人ctx.font = "12px sans-serif";ctx.fillStyle = "#e62e0a";ctx.fillText('11846人喜欢', 0.24 * windowW, (windowW - 100) * 1.47); //90//绘制小程序二维码图片const imgqrcode = canvas.createImage()imgqrcode.onload = (e) => {console.log(5);//绘制二维码ctx.drawImage(imgqrcode, 0.64 * windowW, (windowW - 100) * 1.225, 0.144 * windowW, 0.144 * windowW)//绘制长按购买that.roundRect(ctx, 0.624 * windowW, (windowW - 100) * 1.44, 0.182 * windowW, 0.043 * windowW, 16, '#d94413')//绘制文字ctx.font = "10px sans-serif";ctx.fillStyle = "#fff";ctx.fillText('长按立即购买', 0.64 * windowW, (windowW - 100) * 1.48);}imgqrcode.src = '../../images/2ava.jpg'}imgqgj.src = '../../images/qgj.png'}imggood.src = '../../images/good.png'}imgbg.src = '../../images/1bg.png'})},/*** 绘制圆角矩形* @param {Object} ctx - canvas组件的绘图上下文* @param {Number} x - 矩形的x坐标* @param {Number} y - 矩形的y坐标* @param {Number} w - 矩形的宽度* @param {Number} h - 矩形的高度* @param {Number} r - 矩形的圆角半径* @param {String} [c = 'transparent'] - 矩形的填充色*/roundRect(ctx, x, y, w, h, r, c = '#fff') {if (w < 2 * r) {r = w / 2;}if (h < 2 * r) {r = h / 2;}ctx.beginPath();ctx.fillStyle = c;ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);ctx.moveTo(x + r, y);ctx.lineTo(x + w - r, y);ctx.lineTo(x + w, y + r);ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);ctx.lineTo(x + w, y + h - r);ctx.lineTo(x + w - r, y + h);ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);ctx.lineTo(x + r, y + h);ctx.lineTo(x, y + h - r);ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);ctx.lineTo(x, y + r);ctx.lineTo(x + r, y);ctx.fill();ctx.closePath();},

代码很长，上面的两处代码我是百度两位博主粘贴得来的，比如文字过长分为两段显示的代码、绘制圆角矩形的代码，但是真不记得是哪位博主了…当时并没有做记录，所以如果你看到了，请谅解…
另外我这里的图片都是线下的图片，不是线上请求的，因为这个时候后端接口还没写好，后期线上图片有了再更新

第四步是保存图片到手机
这里主要用到三个api，第一个是wx.canvasToTempFilePath（把当前画布指定区域的内容导出生成指定大小的图片），第二个wx.getSetting（这里是查看是否有相册权限），第三个是wx.saveImageToPhotosAlbum（保存到相册），这里canvas生成图片对于2d画布使用的是canvas属性，而不是canvasId属性，要求传一个对象 这里就是我们在获取canvas实例的时候保存的canvas，下面是代码。

  //点击保存海报savepic() {let that = thiswx.showLoading({title: '正在保存',mask: true})console.log(that.data.windowW - 0.133 * that.data.windowW, that.data.windowY - (that.data.windowW - 100) * 0.2);wx.canvasToTempFilePath({canvas: that.data.canvas,x: 0.133 * that.data.windowW,y: (that.data.windowW - 100) * 0.2,width: that.data.windowW - 100,height: (that.data.windowW - 100) * 1.38,success: function (res) {console.log(res);wx.hideLoading()let tempFilePath = res.tempFilePaththat.checkWritePhotosAlbum(tempFilePath)},fail: function (err) {console.log(err)wx.showToast({title: '保存失败!请重新保存',icon: 'none'})wx.hideLoading()}})},//查看是否有相册权限checkWritePhotosAlbum: function (filePath) {let that = thiswx.getSetting({success(res) {if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success() {that.saveToPhoto(filePath)},fail() {wx.openSetting({success(res) {if (res.authSetting['scope.writePhotosAlbum']) {that.saveToPhoto(filePath)}},fail(res) {wx.showToast({title: '您没有授权，无法保存到相册!',icon: 'none'})}})}})} else {that.saveToPhoto(filePath)}}})},//保存到相册saveToPhoto: function (filePath) {let that = this;wx.saveImageToPhotosAlbum({filePath: filePath,success(res) {wx.showModal({content: '图片已保存到相册，前往相册即可查看！',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function (res) {console.log(res)that.close()},fail: function (res) {console.log(res)}})},fail: function (res) {wx.showToast({title: res.errMsg,icon: 'none',duration: 2000})}})},


 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/72185.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

html一键生成海报,微海报在线制作一键生成方法

html一键生成海报,微海报在线制作一键生成方法

近期&#xff0c;很多朋友都在问建站小兔兔一个问题&#xff0c;那就是为什么你们的微海报在网站页面上找不到呢&#xff1f;我想用建站兔做个微海报&#xff0c;在哪里啊&#xff1f;喵喵~呵呵~你当然在页面上找不到制作的窗口了&#xff0c;因为我们的微海报在线制作一键生成…
阅读更多...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）

【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）

可在系列教程的基础上继续开发&#xff0c;也可以单独使用 【微信小程序-原生开发】系列教程 效果预览 代码实现 点击触发生成海报 在活动详情页&#xff0c;指定点击某图标/按钮&#xff0c;触发跳转到生成海报的页面 pages\components\party\detail\index.js getPoster() …
阅读更多...
2020赚钱机会总结，拾元富另附10个副业赚钱必备的工具与平台，看看你到底错过了多少钱！

2020赚钱机会总结，拾元富另附10个副业赚钱必备的工具与平台，看看你到底错过了多少钱！

赚钱不努力&#xff0c;努力不赚钱&#xff01;你会发现一个现象&#xff0c;自己很辛苦也很努力地去工作&#xff0c;甚至连假节日都不敢休息&#xff0c;平时也很节俭&#xff0c;也没买什么奢侈品&#xff0c;每个月也都有存钱。但是就是不知道为什么&#xff0c;钱存得很慢…
阅读更多...
单日直播GMV破亿，爆品热销628w+，8月榜单有哪些看点？

单日直播GMV破亿，爆品热销628w+，8月榜单有哪些看点？

今年的“抖音818发现好物节”&#xff0c;再次引爆了用户们在夏日的消费热情。 截止8月18日24时&#xff0c;大促成交额破百万直播间达3894个&#xff0c;挂购物车短视频投稿量达1621条&#xff0c;交易额破百万品牌达5560个&#xff0c;泛商城交易额破百万单品个数达400。 而纵…
阅读更多...
微信重磅更新，视频号狂放大招：直播连麦打赏美颜齐上线，新增巨大流量入口

微信重磅更新，视频号狂放大招：直播连麦打赏美颜齐上线，新增巨大流量入口

本文转载自 新榜 12月23日晚&#xff0c;微信迎来重大改版&#xff01;在最新7.0.20版本的微信中&#xff0c;视频号大招不断&#xff0c;不仅上线了连麦功能&#xff0c;支持美颜瘦脸、打赏等功能。 此外&#xff0c;微信还给视频号开放了两个重大入口&#xff0c;包括微信个…
阅读更多...
谷歌开放生成式AI Bard，百度文心一言《唐伯虎点秋香》出圈

谷歌开放生成式AI Bard，百度文心一言《唐伯虎点秋香》出圈

雷递网 雷建平 3月22日 谷歌今日正式开放类ChatGPT产品Bard的访问。谷歌称&#xff0c;这是一项早期实验&#xff0c;可让用户与生成AI协作。 Bard的服务从美国和英国开始&#xff0c;随着时间的推移将扩展到更多国家和语言。 谷歌称&#xff0c;用户可使用Bard来提高工作效率、…
阅读更多...
文心ERNIE 3.0 Zeus千亿参数大模型，一键生成“学术范儿”论文标题

文心ERNIE 3.0 Zeus千亿参数大模型，一键生成“学术范儿”论文标题

文章整理自哔哩哔哩科技区UP主“同济子豪兄”&#xff08;张子豪&#xff09;的主题分享「文心雕龙&#xff0c;一键生成学术灵感」。 文心ERNIE 3.0 Zeus作为基于知识增强的千亿模型&#xff0c;在各类真实场景的生成准确性、流畅性、相关性上全面领先业界其他大模型&#xff…
阅读更多...
飞浆AI studio人工智能课程学习（3）-在具体场景下优化Prompt

飞浆AI studio人工智能课程学习（3）-在具体场景下优化Prompt

文章目录 在具体场景下优化Prompt营销场景办公效率场景日常生活场景海报背景图生成办公效率场景预设Prompt 生活场景中日常学习Prompt: 给写完的代码做文档 将优质Prompt模板化Prompt 1:Prompt 1:Prompt 2步骤文本过长而导致遗失信息的示例 步骤三:归纳输入情况&#xff0c;确定…
阅读更多...
聊聊软件登录界面的设计与交互

聊聊软件登录界面的设计与交互

前面说了一堆废话&#xff0c;想看代码的可直接看第二章。 版本记录 日期备注2020-06-13初稿 零、前言 这个登录界面提取自最近正在做的一个项目&#xff0c;此项目曾被我自豪地称为是公司数采软件的颜值担当&#xff0c;虽然这里面有不少夸大的成分&#xff0c;但也并非担不…
阅读更多...
交互设计介绍

交互设计介绍

交互设计是一门需要结合用户体验和设计思维的复杂学科。作为Ul设计师&#xff0c;我们需要通过了解用户需求和市场趋势&#xff0c;以及深入了解产品的特点和功能&#xff0c;来设计出符合用户需求的交互方式&#xff0c;以提高产品的用户体验和用户满意度。以下是一些交互设计…
阅读更多...
Midjourney助力交互设计师设计网站主页

Midjourney助力交互设计师设计网站主页

Midjourney的一大核心优势是提供创意设计&#xff0c;这个功能也可以用在网站主页设计上&#xff0c;使用Midjourney prompt 应尽量简单&#xff0c;只需要以"web design for..." or "modern web design for..."开头即可 比如设计一个通用SAAS服务的初创企…
阅读更多...
诚意满满的奉上2000套Axure原型图设计源文件UI UX交互设计案例

诚意满满的奉上2000套Axure原型图设计源文件UI UX交互设计案例

网络上的Axure教程看了很多&#xff0c;大多数都是讲软件如何操作&#xff0c;讲交互逻辑和用户体验的却寥寥无几&#xff0c;而实际项目中却非常重交互逻辑和用户体验。把这2000套原型文件一一拆解&#xff0c;慢慢分析作者的设计思路&#xff0c;会发现&#xff0c;互联网产品…
阅读更多...
11个优秀的交互设计作品集

11个优秀的交互设计作品集

本文转自墨刀编译自Vanschneider的10 inspiring ux portfolios and why they work。 不管你做什么样的设计&#xff0c;一个在线交互设计作品集都是必备的。在大多数情况下&#xff0c;公司和客户根本不会考虑你是做什么工作的。虽然很多交互设计师可能认为自己的工作不能很好…
阅读更多...
Websocket的基本认识、使用与封装

Websocket的基本认识、使用与封装

目录 一、Websocket是什么 二、Websocket的基本使用 使用介绍 第一步 第二步 第三步 第四步 常用API介绍 WebSocket(url[, protocols]) WebSocket.readyState WebSocket.send(data) WebSocket.close([code[, reason]]) WebSocket.bufferedAmount WebSocket.exten…
阅读更多...
asp.net paypal信用卡支付功能

asp.net paypal信用卡支付功能

前段时间有个客户网站需要用到信用卡支付功能&#xff0c;客户有个Website Payments Pro的帐号&#xff0c;第一次做这东西花了很多时间在上面&#xff0c;已做好运行了一段日子&#xff0c; 现在总结一下&#xff1a; 1. 先注册一个paypal开发者帐号&#xff0c;这个主要用于s…
阅读更多...
通义听悟诞生背后，AI大模型打响应用第一枪

通义听悟诞生背后，AI大模型打响应用第一枪

配图来自Canva可画 2023年伊始&#xff0c;ChatGPT的爆火出圈&#xff0c;迅速引发了业界对于生成式AI应用的关注&#xff0c;AI大模型的竞争更是愈演愈烈。 作为参与其中的重要玩家&#xff0c;阿里云先是在4月11日举行的阿里云峰会上&#xff0c;推出了通义千问大模型。紧接…
阅读更多...
开发私有chatGPT（二）openai前景展望

开发私有chatGPT（二）openai前景展望

使用 OpenAI 的强大模型构建下一代应用程序。 GPT-3可以执行各种自然语言任务、Codex 可以将自然语言转换为代码的 &#xff0c;DALLE&#xff0c;用于创建和编辑原始图像。 DALLE 开发人员现在可以开始使用&#xff0c;已经有超过3万人已经在使用DALLE来扩展他们的创造力并加…
阅读更多...
快给你的对象做一个微信公众号播报吧-java版

快给你的对象做一个微信公众号播报吧-java版

一、前期准备 1.注册微信测试公众号 使用微信扫码登录此网站https://mp.weixin.qq.com/debug/cgi-bin/sandbox?tsandbox/login就能得到一个微信公众号测试号 推送消息需要用到的信息 用户扫码关注得到用户的id 编辑消息模板 此步骤的模板id、用户微信号id、以及自己的appID、…
阅读更多...
2013年10月微软MVP当选名单揭晓！

2013年10月微软MVP当选名单揭晓！

微软公司于2001年8月起开始在亚洲与各大主要的第三方网站上的微软技术相关论坛合作&#xff0c;微软称之为“亚洲社区支持”计划。 为了鼓励大家在论坛中更好地互相帮助&#xff0c;共同提高&#xff0c;微软在全亚洲的微软论坛参与者中评选出那些技术水平高&#xff0c;积…
阅读更多...
八大排序·希尔排序

八大排序·希尔排序

大家好&#xff0c;我是安然无虞。 文章目录 希尔排序1.基本思想预排序 2.算法实现3.时间复杂度 遇见安然遇见你&#xff0c;不负代码不负卿。 插入排序分为两种&#xff1a;直接插入排序&希尔排序 希尔排序 1.基本思想 希尔排序是在直接插入排序基础上的优化&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发