小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.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 ...
随机推荐
- centos7 快速安装 mariadb(mysql)
从最新版本的linux系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: yum install mariadb mariadb-server systemct ...
- Elastic{ON}参会随手记
Elastic{ON} 同事送了一张Elastic{ON}的票,因为我们的产品中用到的ELK全家桶,实话说用的体量还挺大的,因此非常想去参加这次的发布会. 7.0的新特性 上午的会议是来自总部的一名工 ...
- RestTemplate发送请求并携带header信息 RestTemplate post json格式带header信息
原文地址: http://www.cnblogs.com/hujunzheng/p/6018505.html RestTemplate发送请求并携带header信息 v1.使用restTempl ...
- 关闭pycharm自动更新
如下图:
- js正则提取数字小数,提取中文,提取英文
var value="污染物:PM2.5"; //提取中文 console.log(value.replace(/[^\u4E00-\u9FA5]/g,'')); //提取英文 c ...
- 小程序学习笔记五:API
API 小程序提供了丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等. api调用格式: 1:wx.on 开头的 API 是监听某个事件发生的API接口,接受一 ...
- NOIP2010普及组 导弹拦截
导弹拦截 OJ地址: https://www.luogu.org/problemnew/show/P1158 http://codevs.cn/problem/1128/ 题目描述 Descrip ...
- 【大话QT之十二】基于CTK Plugin Framework的插件版本号动态升级
应用需求: 某些场景下我们可能面临这种问题,在执行着的应用程序不能终止的情况下,升级某个功能(或添,或减.或改动).在不採用CTK Plugin Framework插件系统架构的情况下这将是非常困难的 ...
- 记一次免费让网站启用HTTPS的过程
写在前面 个人网站运行将近2个月了,期间根据酷壳的一篇教程如何免费的让网站启用HTTPS做了一次,中间遇到问题就放下了.昨天孙三苗问我网站地址说要添加友链,出于好奇想看他网站长什么样,顺道也加一下友链 ...
- 【C++】C++中typedef、auto与decltype的作用
typedef 类型别名(type alias)是一个名字,使用typedef不会真正地创建一种新的数据类型,它只是已经存在数据类型的一个新名称.语法: typedef type name; 其中ty ...