小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.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 ...
随机推荐
- 用SSH登录远程的机器,在远程机器上执行本地机器上的脚本
假设本地的机器IP为10.245.111.90,我们想要在10.245.111.93上执行一个保存在10.245.111.90上的脚本. 经过测试通过的命令如下: ssh root@10.245.11 ...
- Spark2.2出现异常:ERROR SparkUI: Failed to bind SparkUI
详细错误信息如下: // :: INFO util.log: Logging initialized @5402ms // :: INFO server.Server: jetty-9.3.z-SNA ...
- 未能加载文件或程序集“SuperMap.Data.dll”
重新配置的新的开发环境,使用的是原来的工程文件,编译通过,运行报错:"未能加载文件或程序集"SuperMap.Data.dll"或它的某一个依赖项.找不到指定的模块&qu ...
- Linux中查看文件夹占用磁盘大小
一.命令 ./ du -h ./ 查看当前目录占用空间 二.样例
- t-SNE 层次聚类
https://zhuanlan.zhihu.com/p/28967965 https://haojunsui.github.io/2016/07/16/scipy-hac/
- http://www.360doc.com/userhome.aspx?userid=5054188&cid=235
http://www.360doc.com/userhome.aspx?userid=5054188&cid=235
- Ubuntu安装守护进程supervisor
Supervisor安装与配置(Linux/Unix进程管理工具) asp.net core 负载均衡集群搭建(centos7+nginx+supervisor+kestrel) 为了保证服务能够稳定 ...
- VMVare 虚拟机使用桥接模式
VMVare 虚拟机使用桥接模式,和物理机使用同一个物理网卡,和物理主机使用同一个段的ip. 1.VMware 编辑 > 虚拟网络编辑器 2.更改配置 3.编辑名称为VMnet0 的网络(如果 ...
- 每天进步一点点——mysql——mysqlbinlog
一. 简单介绍 mysqlbinlog:用于查看server生成的二进制日志的工具. 二. 命令格式 mysqlbinlog 选项日志文件1 三. 经常使用參数 ...
- 同一个tomcat下面放多个项目 每个项目用不同的域名访问
vim ./conf/server.conf <Host name=" appBase="/www/test1/webapps" ##这是war包存放的位置 unp ...