小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.length*字符宽度)
//test.xml
<canvas bindtap='showhaibao' canvas-id="myCanvas" style="width:{{canvasw}};height:{{canvash}};"/>
//test.js
data:{
canvasw: '',
canvash: ''
} //获取小程序码
wx.getSystemInfo({
success: function (res) {
that.setData({
canvasw: res.windowWidth + 'px',
canvash: res.windowHeight + 'px'
})
}
})
wx.request({
url: rootDocment + '/a/fenxiang.json',
// url: app.globalData.serverUrl + 'getChengXuMa',
data: {
id: options.id
},
success: function (res) {
console.log(res.data.data.pic,"aaaaaaaaaaaaa")
var res4 = res.data.data.pic//获取小程序二维码
wx.downloadFile({
url: res4,
success: function (res) {
var res3 = res.tempFilePath//小程序码
console.log(res.tempFilePath, "bbbbbbb")
wx.downloadFile({
url: options.pic,
success: function (res) {
var res2 = res.tempFilePath//商品图片码
wx.getSystemInfo({
success: function (res) {
var w = res.windowWidth;
var h = res.windowHeight;
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('rgb(243, 243, 243)')
ctx.fillRect(0, 0, w, h)
ctx.drawImage(res2, (w - 180) / 2, 25, 180, 180)//商品图
ctx.setTextAlign('center')
ctx.setFillStyle('rgb(43, 43, 43)')
ctx.setFontSize(18)
ctx.fillText(options.title, w / 2, 230)
ctx.setFillStyle('rgb(255, 0, 0)')
ctx.setFontSize(18)
ctx.fillText('¥' + options.price, w / 2, 255)
ctx.drawImage(res3, (w - 110) / 2, 325, 110, 110)//小程序二维码
ctx.setFillStyle('rgb(43, 43, 43)')
ctx.setFontSize(14)
ctx.fillText('扫码查看详情', w / 2, 450)
ctx.draw();
}, fail: function (e) {
console.log(e)
}
})
}
})
}
});
}
})
小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.length*字符宽度)的更多相关文章
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 微信小程序裁剪图片成圆形
代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...
- 「小程序JAVA实战」小程序头像图片上传(中)(44)
转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan43/ 用户可以上传了 ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
- 微信小程序开发语音识别文字教程
微信小程序开发语音识别文字教程 现在后台 添加插件 微信同声传译 然后app.json 加入插件 "plugins": { "WechatSI": { &quo ...
- 微信小程序 image图片组件实现宽度固定 高度自适应
给img的mode设置值 注1:image组件默认宽度300px.高度225px 注2:image组件中二维码/小程序码图片不支持长按识别.仅在wx.previewImage中支持长按识别. mode ...
- 小程序canvas中文字设置居中锚点
小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到request和download列表中,使用wx.getImageInfo()就可以缓存到本地,成功 ...
- PHP 实现微信小程序敏感图片、内容检测接口
主要是为了调用微信小程序msgSecCheck.imgSecCheck接口. 先附上小程序接口说明文档地址:https://developers.weixin.qq.com/miniprogram/d ...
随机推荐
- 【黑魔法】Covering Indexes、STRAIGHT_JOIN
今天给大家介绍两个黑魔法,这都是压箱底的法宝.大家在使用时,一定要弄清他们的适用场景及用法,用好了,就是一把开天斧,用不好那就是画蛇添足.自从看过耗子哥(左耳朵耗子)的博客,都会给对相应专题有兴趣的小 ...
- ubuntu 安装jdk 的两种方式:
:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通过 apt-get upgrade 方式方便获得jdk的升级 使用ppa/源方式安装 1.添加ppa sudo ...
- mysql YEARWEEK(date[,mode]) 函数 查询上周数据 以及本周数据
通常使用下边sql即可(如果数据库设置了周一为一周起始的话): 查询上周数据(addtime为datetime格式) SELECT id,addtime FROM mall_order WHERE ...
- String类源码解析
1. String是使用char[]数组来存储的,并且String值在创建之后就不可以改变了.char[]数组的定义为: /** The value is used for character sto ...
- go微服务框架go-micro深度学习-目录
go微服务框架go-micro深度学习(一) 整体架构介绍 go微服务框架go-micro深度学习(二) 入门例子 go微服务框架go-micro深度学习(三) Registry服务的注册和发现 go ...
- mysql alter 添加索引
1.添加主键索引 ALTER TABLE `table_name` ADD PRIMARY KEY (`column`) 2.添加唯一索引 ALTER TABLE `table_name` ADD U ...
- .net core 2.0+superui +Dapper.SimpleCRUD+mysql+NLog
**_ .net core 2.0+superui +Dapper.SimpleCRUD+mysql+NLog _** 前端框架 superui http://www.supermgr.cn/ 1.组 ...
- Docker使用exec进入正在运行中的容器
docker在1.3.X版本之后提供了一个新的命令exec用于进入容器,这种方式相对简单一些,下面我们来看一下该命令的使用: docker exec --help 接下来我们使用该命令进入一个已经在运 ...
- Win10正式企业版激活方法
Win10正式企业版激活方法 在正式开始激活Win10正式企业版系统之前,我们需要先查看一下当前Win10正式企业版系统的激活状态: 右击桌面左下角的“Windows”按钮,从弹出的右键菜单中选择“控 ...
- LZW算法PHP实现方法 lzw_decompress php
LZW算法PHP实现方法 lzw_decompress php 博客分类: Php / Pear / Mysql / Node.js LZW算法简介 字符串和编码的对应关系是在压缩过程中动态生成的 ...