小程序canvas文本换行生成图片

一、图片透明及旋转

let ctx = wx.createCanvasContext(‘shareImg‘)
ctx.drawImage(‘../../../‘ + res[0].path, 0, 0, w, h)
ctx.save()
ctx.globalAlpha = 0.2
ctx.rotate(-15*Math.PI/180)

二、字体加粗

let text = ‘这是加粗的文本‘
ctx.fillText(text, 194, 378 + 0.5)
ctx.fillText(text, 194 + 0.5, 378)
ctx.fillText(text, 194 , 378)

三、文本换行

this.canvasTextAutoLine(‘这是换行的文本‘,ctx,85,467,60,560)
/*
canvas文字换行
str:要绘制的字符串
ctx:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高,自己定义个值即可
canvasWidth:画布的宽度
*/
canvasTextAutoLine(str,ctx, initX, initY, lineHeight,canvasWidth) {
    const arrText = str.split(‘‘)//字符串分割为数组
    let currentText = ‘‘// 当前字符串及宽度
    let currentWidth
    for (let letter of arrText) {
        currentText += letter
        currentWidth = ctx.measureText(currentText).width
        if (currentWidth > canvasWidth) {
            ctx.fillText(currentText, initX, initY)
            currentText = ‘‘
            initY += lineHeight
        }
    }
    if (currentText) {
        ctx.fillText(currentText, initX, initY)
    }
},

四、生成图片

注意:

  • 绘制本地图片直接写入相对路径即可:ctx.drawImage(‘../../images/xxx.png‘,x, y, w, h)。
  • 如果图片来自网络,首先需要在小程序服务器域名配置downloadFile的合法域名,必须为https协议,不然真机上是绘制不出来的。
  • 如果网络图片地址是异步请求过来的数据,需要先使用wx.downloadFile()的方式,把图片下载到本地,再把临时的本地路径使用drawImage()绘制:
wx.downloadFile({
    url: src,
    success: function (res) {
        if(res.tempFilePath) {
            ctx.drawImage(res.tempFilePath, x, y, w, h)
        }
    }
})
                        
  • 如果有多张网络图片时,同样需要先等待所有的图片加载完,再去绘制。这里可以使用promise的方式来实现:
wx.showLoading({ title: ‘努力生成中...‘ })
//小程序本地路役图片
let promise1 = new Promise(function (resolve, reject) {
    wx.getImageInfo({
        src: ‘../../../images/bg1.png‘,
        success: function (res) {
            resolve(res)
        },
        fail: function (error) {
            reject(error)
        },
    })
});
//网络异步请求
let promise2 = new Promise(function (resolve, reject) {
    api.orderDetail().then(res => {
        if(res.code == 0) {
            resolve()
        }
    }).catch((error) => {
        reject(error)
    })
});
Promise.all([promise1,promise2]).then(result => {
    let ctx = wx.createCanvasContext(‘shareImg‘)
    ctx.drawImage(‘../../‘ + result[0].path, 0, 0, w, h)
    ctx.save()
    wx.downloadFile({
        url: result[1].pic,
        success: function (res) {
            console.log(res)
            if(res.tempFilePath) {
                ctx.drawImage(res.tempFilePath, 178, 790, 216, 216)

                ctx.stroke()
                //draw的第一个参数为false表示仅有一个画布
                //第二个参数一定要加定时器,不然会出现生成的图片黑白
                ctx.draw(false, setTimeout(() => {
                    wx.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        width: w,
                        height: h,
                        destWidth: w,
                        destHeight: h,
                        canvasId: ‘shareImg‘,
                        success: function (res) {
                            _this.setData({ "finishCreateCanvas": true })
                        },
                        fail: function (res) {
                            _this.createCanvasFail()
                         },
                        complete: function (res) {
                            wx.hideLoading()
                        }
                    })
                }, 500))}
            }
        },fail: function (error) {
            //如果有图片数据请求失败,在这里做进一步的处理
            _this.createCanvasFail()
        },
    })
}).catch((error) => {
    //如果有图片数据请求失败,在这里做进一步的处理
    _this.createCanvasFail()
})

五、生成图片
生成图片之前必须保证canvas已经绘制完成,对此在使用wx.canvasToTempFilePath()方法可以使用定时器的形式保存为临时图片路径,代码已经在上面有所展示。

//生产环境时 记得这里要加入获取相册授权的代码
wx.saveImageToPhotosAlbum({
    filePath: _this.data.prurl,
    success(res) {
        wx.showModal({
            content: ‘图片已保存到相册,赶紧晒一下吧~‘,
            showCancel: false,
            confirmText: ‘好哒‘,
            confirmColor: ‘#72B9C3‘,
            success: function (res) {
                if (res.confirm) {
                    console.log(‘用户点击确定‘);
                }
            }
        })
    }
})

原文地址:https://www.cnblogs.com/10manongit/p/12700419.html

时间: 2024-11-05 22:00:36

小程序canvas文本换行生成图片的相关文章

微信小程序 | canvas绘图

1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 设备 rpx换算px (屏幕宽度/750): px换算rpx (750/屏幕宽度) 2.小程序canvas总结 小程序绘制的单位是px, 基础知识点请参考文档 : canvas中存在一个坐标系,二维的,左上

微信小程序富文本-wxParse的使用

最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文章是这样的,带有很多的html标签(这里是截取的今日头条某文章内容),但是小程序并不支持,它会以文本直接显示 怎么办呢? 2.在这个时候可以考虑 wxParse wxParse信息 版本号0.1 历史版本号0.2 具体代码请查看仓库分支V1 github地址: https://github.com/

小程序富文本解析

微信小程序富文本解析wxParse:https://github.com/icindy/wxParse 百度小程序富文本解析bdParse:https://github.com/fengye002012/bdParse 抖音头条小程序富文本解析ttParse:https://github.com/nqp1994/ttParse 原文地址:https://www.cnblogs.com/suni1024/p/11634609.html

小程序---canvas画图,生成分享图片,画图文字换行

小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图 drawCanvas:function(){ var that = this; var contentPic = '/images/[email protected]' wx.downloadFile({ //当图片为网络图片时,需要先下载到本地,再进行操作, url: contentPic, //否则canvas会加载不到图

微信小程序 canvas 绘图问题总结

业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将用到的图片,文案素材拼装到一张图片,保存到本地就可以了. 首先创建画布,将一张网上的图片画到画布上. const ctx = wx.createCanvasContext('shareCanvas'); ctx.drawImage("https://img3.doubanio.com/view/ph

小程序 canvas 2d 新接口 绘制带小程序码的海报图

截止2020.3.26,小程序官方文档中,有两种绘制方式:Canvas 2D.webGL 文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 而开发者工具中,官方推荐使用性能更好的2d模式,用法如下所示: <canvas type="2d" id="myCanvas"></canvas> 但是网上大多数教程都是使用旧的接口,如: <can

微信 小程序 canvas

测试手机为IPHONE6,开发者工具版本0.10.102800 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的H5canvas,就当它是个div就行,画出范围的东西也是存在的,改变wi

小程序canvas截图组件

最近做一个小程序的过程中,需要用到截图功能,网上搜了一下,发现没有符合要求的,就自己搞了个组件,方便复用. 目前功能很简单,传入宽高和图片路径即可,宽高是为了计算截图的比例,只支持缩放和移动. 实现思路是: 1.模拟一个截取框:2.移动图片位置,缩放图片:3.获取图片在其中的位置(left,top,width,height):4.使用canvas绘制图片,然后截取就ok了. 其中第二步的缩放图片比较麻烦,缩放中心点以及平滑缩放 以下是我的实现方式 wxml: <!--component/picP

微信小程序富文本中的图片大小超出屏幕

这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '<img class="rich-img" ' ); 就可以了 rich-text   .rich-img { width: 100% ; height: auto ; } 原文地址:https://www.cnblogs.com/fangyinghua/p/9264425.html