小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.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 ...
随机推荐
- JavaWeb中过滤器Filter的使用示例
https://github.com/YouXianMing/Java-Web-Study/tree/master/Servlet-Filter 过滤器示例基于以下流程 测试效果如下 web.xml配 ...
- mysql 正则表达式判断是否数字
select ('123a' REGEXP '[^0-9.]'); --‘123a'中含有字符'a' 输出结果为1 mysql中常量true输出为1 false输出为0
- SpringBoot项目接口第一次访问慢的问题
SpringBoot的接口第一次访问都很慢,通过日志可以发现,dispatcherServlet不是一开始就加载的,有访问才开始加载的,即懒加载. 2019-01-25 15:23:46.264 IN ...
- JAVA中调用LevelDB用于Linux和Window环境下快速存储KV结构
一.简介 JAVA中调用LevelDB用于Linux和Window环境下快速存储KV结构 二.依赖 <!-- https://mvnrepository.com/artifact/org.fus ...
- spring+springmvc+ibatis整合注解方式实例
需求说明 实现用户通过数据库验证登录需求.採用 Myeclipse+Tomcat 6.0+Mysql 5.0+JDK 1.6 2.数据库表 开发所用是Mysql数据库,仅仅建立单张用户表T_USER, ...
- 远程FTP下载文件
现在存在以下环境: 远程服务器:192.168.1.107 用户名:dt 密码:dt123 需要从该服务器上下载文件到本地 1.登录(进入到那个目录登录的 ,文件就会被下载到该文件) ftp 192. ...
- [Java] zjdbcping:JDBC数据库连接测试工具
作者: zyl910 一.缘由 当数据库服务器很多时,或者要与第三方公司做数据库表交换时,此时觉得若有一个简单快捷的数据库连接测试工具就好了. 因为若是采取直接把程序部署到tomcat等容器再测试的办 ...
- echarts参数详解--散点图
参考地址:http://www.cnblogs.com/weizhen/p/5907617.html <!-- 1.首先需要下载包echarts.js,然后引入该包 --> <!DO ...
- WCF Restful Service Get / Post请求
Rest 它是用于创建分布式超文本媒体的一种架构方式,我们可以通过标准的HTTP(GET,POST,PUT,DELETE)操作来构建基于面向资源的软件架构方式(Resource-Oriented Ar ...
- 使用python实现测试工具(一)
本系列教程我们将使用python实现一些简单的测试工具,为了尽可能的简单,我们的工具以命令行工具为主. 本系列教程使用的python版本是3.6.3. 背景 这一节我们实现简单的命令行发送get请求的 ...