小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.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 ...
随机推荐
- FutureTask类
FutureTask类是Future 的一个实现,并实现了Runnable. 所以可通过Executor(线程池)来运行,也可传递给Thread对象运行. 假设在主线程中须要运行比較耗时的操作时.但 ...
- 【转】Go Interface 源码剖析
源网址:http://legendtkl.com/2017/07/01/golang-interface-implement/ 0.引言 在上一篇文章 <深入理解 Go Interface> ...
- memcache源码编译安装
问题描述: memcached未授权漏洞.运行账户root,对未授权,官方也没有账户认证,也想不明白,为啥不搞个账户认证memcached..... 问题解决: 未授权,网上大部分通过防火墙实现对未知 ...
- How to trigger a Kubernetes cronjob manually-手动触发一个cronjob
What should you do when you’ve developed and installed a cron job for your Kubernetes application, a ...
- 通过一个小Trick实现shader的像素识别/统计操作
2018/12/14日补充:后来发现compute shader里用AppendStructuredBuffer可以解决这类问题,请看这里:https://www.cnblogs.com/hont/p ...
- 【iCore1S 双核心板_ARM】例程十八:SD_IAP_FPGA实验——更新升级FPGA
实验现象及操作说明: 1.烧写程序成功,绿色ARM·LED灯点亮,三色FPGA·LED灯循环点亮,烧写失败,如果挂载SD卡失败,红灯快闪,如果打开文件失败,蓝灯快闪,读取文件指针移动失败,白灯点亮,升 ...
- SetProcessWorkingSetSize减少内存占用
[DllImport("kernel32.dll", EntryPoint = "SetProcessWorkingSetSize")] public stat ...
- mybatis 映射器(mappers) 配置说明 加载映射文件方式
映射器(mappers) 既然 MyBatis 的行为已经由上述元素配置完了,我们现在就要定义 SQL 映射语句了.但是首先我们需要告诉 MyBatis 到哪里去找到这些语句. Java 在自动查找这 ...
- Tensorflow学习资源
https://tensorflow.google.cn/ 中文官网 https://www.w3cschool.cn/tensorflow_python/tensorflow_python-gnwm ...
- Mysql获取最大自增ID(auto_increment)的五种方式及其特点
在关系型数据库的表结构中,一般情况下,都会定义一个具有‘AUTO_INCREMENT’扩展属性的‘ID’字段,以确保数据表的每一条记录都有一个唯一标识. 而实际应用中,获取到最近最大的ID值是必修课之 ...