原生小程序用画布制作海报，等比例缩放，和uniapp差不多就是写法有点不同

最后直接看效果图；不废话，直接上代码，效果图。

（四个文件复制直接可以使用,代码有注释）

思路：当以iphone6/7/8 基础的时候，你就会看到获取屏幕的宽为350，高为603，这个是微信开发工具的获取的屏幕的数据。 1、图片在canvas的时候，你可以先设置好高度，和宽度。 2、当你的canvas需要放到其他的手机屏幕的时，你需要用其他手机的宽/iphone678宽高/iphone678高获取的它（放大或缩小）的比例。3、然后再分别乘以图片的宽、高 4、文字也和图片一样需要设置宽高
js↓↓↓↓↓↓文件：

// pages/manage/myshare/painter.js
Page({/*** 页面的初始数据*/data: {
var foo = 'bar';},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/
// canvas.jsonReady: function (e) {},  sening: function(e) {var that = this;wx.getSystemInfo({success: function(res) {console.log(res.windowHeight)console.log(res.windowWidth)console.log(res.pixelRatio)let windowscale = res.windowHeight/res.windowWidth;console.log(windowscale)// 把数据放到datathat.setData({windowHeight: res.windowHeight,windowWidth: res.windowWidth,windowscale:windowscale,psScal:res.windowWidth/350,//宽//以iphone6/7/8 宽高为基准。用其他也行，进行比例伸缩psScal1:res.windowHeight/603//高//以iphone6/7/8 宽高为基准。用其他也行，进行比例伸缩})},})var windowWidth = Number(that.data.windowWidth);var windowHeight = Number(that.data.windowHeight);// console.log(windowWidth*2)var wscale = that.data.windowscale;console.log(windowHeight)const ctx = wx.createCanvasContext('shareImg')// 主要就是计算好各个图文的位置// 头部绿色图片var psScal = windowWidth/350var psScal1 = windowHeight/603//打印宽高比console.log(psScal)console.log(psScal1)let topGreen = '../../../images/beijing212.jpg';ctx.drawImage(topGreen, 0, 0, psScal*270, psScal1*270)// 二维码图片let botWhite = '../../../images/qcm.jpg';ctx.drawImage(botWhite, psScal*170,psScal1*320, psScal*100, psScal1*100)/***// 设置文字大小******/ ctx.setTextAlign('center')ctx.setFontSize(15)ctx.fillStyle = '#fff';var hedetxt = '';// 填充文字ctx.fillText(hedetxt, psScal*254 / 2, psScal1*200)// 设置文字大小ctx.setTextAlign('center')ctx.setFontSize(13)ctx.fillStyle = '#333';var hedbt = '千里亦亲，沟通有爱 ！';// 填充文字ctx.fillText(hedbt, psScal*254 / 2, psScal1*290)ctx.setTextAlign('left')ctx.setFontSize(20)ctx.fillStyle = '#1F2C3A';var position = "";var chr = position.split(""); //that.data.arr.title这个方法是将一个字符串分割成字符串数组var temp = "";var row = [];for (var a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < windowWidth + 50) {temp += chr[a];} else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp);//如果数组长度大于2 则截取前两个if (row.length > 2) {var rowCut = row.slice(0, 3);// 这个参数就可以判断显示几行var rowPart = rowCut[1];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < windowWidth) {test += rowPart[a];} else {break;}}empty.push(test);var group = empty[0] //这里只显示两行，超出的用...表示rowCut.splice(1, 1, group);row = rowCut;}for (var b = 0; b < row.length; b++) {ctx.fillText(row[b], psScal*26, psScal1*(320 + b * 50));}// // 设置文字大小// ctx.setTextAlign('center')// ctx.setFontSize(26)// ctx.fillStyle = '#1F2C3A';// var rtt = '我正在读这篇文章，推荐给你';// // 填充文字// ctx.fillText(rtt, 540 / 2 + 68, 590)// 1、设置文字大小ctx.setFontSize(34)console.log("psScal*34") console.log(psScal*34) ctx.fillStyle = '#1dacf9';var rbc = '睿';// 填充文字并设置位置ctx.fillText(rbc,  psScal*20, psScal1*330)// 2、设置文字大小ctx.setFontSize(34)ctx.fillStyle = '#1dacf9';var rbc = '航';// 填充文字并设置位置ctx.fillText(rbc,  psScal*60, psScal1*355)// 3、设置文字大小ctx.setFontSize(12)ctx.fillStyle = '#aaa';var rct = '小程序码';// 填充文字并设置位置ctx.fillText(rct,  psScal*40, psScal1*400)// 4、设置文字大小ctx.setFontSize(12)ctx.fillStyle = '#aaa';var rbl = '千航百睿，';// 填充文字并设置位置ctx.fillText(rbl,psScal*5, psScal1*415)// 5、设置文字大小ctx.setFontSize(12)ctx.fillStyle = '#aaa';var rbr = '与爱同行';// 填充文字并设置位置ctx.fillText(rbr,  psScal*80, psScal1*415)ctx.draw()},/*** 生命周期函数--监听页面显示*/onShow: function () {this.sening()},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

.wxml↓↓↓↓↓↓↓文件

<view style="background-color:rgba(0,0,0,0.2);width:100vw;height: 100vh;box-sizing: border-box;"><!-- canvas.wxml psScal*psScal*-->
<view class="box-ps">
<canvas class="canvas" style="width:{{psScal*270}}px;height:{{psScal1*425}}px"  canvas-id="shareImg" ></canvas>
<view class="bottom"><view class="arrow0">保存</view><view class="arrow1">取消</view>
</view>
</view>
</view>

.wxss↓↓↓↓↓↓↓文件

/* pages/manage/myshare/painter.wxss */
.canvas{background-color: #fff;border: 1rpx solid rgba(0,0,0,0.3);margin:0 auto;
}.box-ps{width:100%;display: flex;flex-direction: column;box-sizing: border-box;/* justify-content: space-around; */height:auto;padding: 70rpx;margin:0 auto;box-sizing: border-box;
}.bottom{display: flex;flex-direction: row;margin-top: 70rpx;width: auto;box-sizing: border-box;justify-content: space-around;
}.arrow0{text-align: center;border-radius: 30rpx;/* margin-left: 50rpx; */width: 130rpx;font-size: 14px;padding: 13rpx 40rpx;background-color: #2fa5ff;color: #fff;
}.arrow1{text-align: center;border-radius: 30rpx;width: 130rpx;/* margin-right: 50rpx; */font-size: 14px;padding: 13rpx 40rpx;background-color: #2fa5ff;color: #fff;
}

json↓↓↓↓↓↓↓↓文件

{"usingComponents": {"painter":"/components/painter"}
}

效果图请看这↓↓↓↓↓↓↓↓↓↓↓↓↓：

原生小程序用画布制作海报，等比例缩放，和uniapp差不多就是写法有点不同相关推荐

微信小程序实现画布生成海报功能
微信小程序可以通过使用标签来实现生成海报的功能.以下是基本实现步骤: 1.在 WXML 文件中创建一个标签,并设置其宽度和高度属性.' <canvas canvas-id="myC ...
微信小程序纯前端生成海报并保存本地
需求公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研因为小程序的打包限制,不可能将所有的图片都放在代码 ...
小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
uniapp之小程序端生成分享海报（带自定义参数的二维码）
内容需求: 小程序端生成一个海报,海报内容包括当前授权账号的头像,当前授权账号的邀请码,一张特定图片,分享页面的带对应参数的小程序二维码:生成的海报需要保存到本地功能方法: 1.前端用canvas绘 ...
使用PHP的GD库绘制电商小程序的商品分享海报
GD(代表 Graphic Draw)是一个开源代码库,在 PHP 中创建和操作图像是必需的. 除了创建 JPEG.PNG 和 GIF 图像外,它还可以创建图形.图表和缩略图. 下面的例子是PHP使用 ...
小程序云开发_借助小程序云开发制作校园导览小程序丨实战
导语偌大校园,寻路犯难.没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景. 背景刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收 ...
uni app 调用网络打印机_前端工程师 | 原生小程序坑点：uni-app到底好用在哪里？...
要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
腾讯 Omi 团队发布 mps - 原生小程序插上 JSX 、Less 和 Cloud 的翅膀
写在前面原生小程序插上 JSX .Less 和 Cloud 的翅膀 mps 是什么?为什么需要 mps?先列举几个现状: 目前小程序开发使用最多的技术依然是原生小程序原生小程序的 API 在不断完 ...

原生小程序用画布制作海报，等比例缩放，和uniapp差不多就是写法有点不同

原生小程序用画布制作海报，等比例缩放，和uniapp差不多就是写法有点不同相关推荐

最新文章

热门文章