微信小程序 canvas生成图片是空白的

参考文章： 微信小程序 canvas 绘图问题总结

公司提了压缩的需求，在网上查了些资料，用canvas实现了，但发现使用wxcanvasToTempFilePath如果只是打印地址然后点击地址查看，或者保存至相册再查看，拿到的就是正常的，但我如果要在压缩后的success回调中使用去做一些事情（比如编码wxgetFileSystemManager()readFile、上传至服务器wxrequest），拿到的就是空白的。

经过多次调试后发现，是这里的问题

这里需要设置的多一点。我之前设置的100，即100ms，可能因为上传至服务器是异步的，导致100ms内canvas没法完成加载 *** 作，生成的就是空白的。改成1000之后，有足够长的时间渲染，就不会出现空白的问题了。

在微信小程序使用canvas绘制圆角矩形时，在Android出现变形、锯齿现象，而iOS正常。

根据小程序社区回复：使用ctxarc + ctxlineTo就能避免Android错误，Android只使用ctxarcTo不兼容！！！

解决方案：

先上一图，这个是最终效果：

再看看闪耀效果：

1、先将文字画在canvas；

2、利用getImageData()获取图像数据；

3、将图像数据中黑色（你可以用其他颜色）按一定间隔取值（获取坐标）；

4、在获取的坐标画矩形（你画其他形状也是可以的）；

5、使用requestAnimationFrame，变换矩形颜色。

这样就闪烁起来了~~

var i = 0

Page({

/ 页面的初始数据/data: {hideNav: false,colors: ["#fff", "#FF6E40", "#FFAB40", "#FFFF00", "#EEFF41", "#B2FF59", "#69F0AE", "#64FFDA", "#18FFFF", "#40C4FF", "#E040FB", "#FF4081", "#ff5252"],

text: '肖战',scroll: false,setting: false},

/ 生命周期函数--监听页面加载/onLoad: function (options) {let that = this, text = wxgetStorageSync('blinkText') || thisdatatext;thissetData({text})thisinit()},

init() {wxcreateSelectorQuery()select('#canvas')fields({node: true,size: true,})exec((res) => {let that = this,text = thisdatatextconst width = res[0]widthconst height = res[0]height

const canvas = res[0]nodeconst ctx = canvasgetContext('2d')const dpr = 1 //wxgetSystemInfoSync()pixelRatiocanvaswidth = width dprcanvasheight = height dprctxscale(dpr, dpr)i = (canvaswidth - thatgetByteLen(text) 100) / 2ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);ctxfont = "bolder 200px Arial";ctxfillStyle = 'black';ctxtextBaseline = 'top';ctxfillText(text, 0, 100);// ctxlineWidth = 5;// ctxstrokeText(text, 0, 100);let imageData = ctxgetImageData(0, 0, canvaswidth, canvasheight)data;// consolelog(imageData)

ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);

thisdatacanvas = canvasthisdatactx = ctxthisdataimageData = imageDataconsolelog(canvaswidth, canvasheight)// thisdrawText()const renderLoop = () => {thisdrawText()

canvasrequestAnimationFrame(renderLoop)}// canvascancelAnimationFrame(renderLoop)canvasrequestAnimationFrame(renderLoop)})},drawText() {var gap = 7,{imageData,canvas,ctx,text,scroll} = thisdataif (scroll) {if (i >= canvaswidth) {i = -canvaswidth}i += 2}

ctxclearRect(0, 0, canvaswidth, canvasheight)for (var h = 0; h < canvasheight; h += gap) {for (var w = 0; w < canvaswidth; w += gap) {var position = (canvaswidth h + w) 4;var r = imageData[position],g = imageData[position + 1],b = imageData[position + 2];

if (r + g + b == 0) {ctxfillStyle = thisdatacolors[Mathfloor(Mathrandom() thisdatacolorslength)];ctxfillRect(w + i, h, 5, 5);}}}

},toggleSetting() {thissetData({setting: thisdatasetting false : true})},setText(e) {

let that = thiswxcloudcallFunction({name: 'msgSecCheck',data: {op: 'textCheck',content: edetailvalue},success(res) {consolelog('ContentCheck-res', res)if (resresultcode == 300) {consolelog(resresultmsg)wxshowToast({icon: 'none',title: resresultmsg,})thatsetData({'text': ''})} else {thatsetData({setting: false,'text': edetailvalue})thatinit()}},fail(err) {consolelog('ContentCheck-errxxxx', err)

}})

},getByteLen(str) {var len = 0;for (var i = 0; i < strlength; i++) {var length = strcharCodeAt(i);if (length >= 0 && length <= 128) {len += 1;} else {len += 2;}}consolelog('文字长度',len)return len;},donothing() {

},/ 生命周期函数--监听页面初次渲染完成/onReady: function () {

},

/ 生命周期函数--监听页面显示/onShow: function () {

},

/ 生命周期函数--监听页面隐藏/onHide: function () {

},

/ 生命周期函数--监听页面卸载/onUnload: function () {wxsetStorage({data: thisdatatext,key: 'blinkText',})},

/ 页面相关事件处理函数--监听用户下拉动作/onPullDownRefresh: function () {

},

/ 页面上拉触底事件的处理函数/onReachBottom: function () {

},

/ 用户点击右上角分享/onShareAppMessage: function () {

}})

以上就是关于微信小程序 canvas生成图片是空白的全部的内容，包括:微信小程序 canvas生成图片是空白的、微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿、小程序：利用canvas制作文字特效等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！