这篇主要讲canvas绘制以及保存到本地相册的方法
实现功能如下：
1用户手动输入文字，并把这些文字绘制到canvas中
2将绘制到canvas中
3将canvas变成并保存到本地相册中
效果如图：
第一部分 wxml
要注意写这种形式tpye='2d'，这是新版本的，旧版本的如下图已经不维护了，所以建议写这种，另外要注意id，不是写canvas-id，而只是id
第二部分 js
这么一写下来也没有什么特别难的地方。其实还可以实现用户手动上传，这样可能会更有趣一点
canvas转换api不相同，并且参数不相同，支付宝参数与支付宝开发者文档中的参数都出现不相同
下面我们看微信的wxcanvasToTempFilePath和支付宝ctxtoTempFilePath中success返回的参数差异,我们如果要获取对应的，wx返回两种格式，一种是本地，一种是>
在小程序中，Canvas 组件是一个用于绘制图形的画布组件，它可以让开发者在画布上绘制图形、添加事件等 *** 作。如果画布的高度大于屏幕高度，并且没有进行特殊设置或调整，那么在小程序中是无法遮挡系统底部导航的。
需要注意的是，小程序的底部导航条是系统自带的组件，在小程序中无法直接修改或遮挡。如果你需要使用自定义的导航条，可以考虑使用小程序的自定义组件或自己实现相应的功能。
如果确实需要在小程序中遮挡系统底部导航，可以考虑以下几种方法：
1 调整画布高度
可以通过代码动态调整 Canvas 画布的高度，使得画布高度不超过屏幕高度，从而避免遮挡底部导航。例如，可以获取屏幕高度并设置画布高度为屏幕高度减去一定的偏移量。
2 建立全屏页面
可以把绘制画布的页面作为一个全屏页面，并在该页面中隐藏系统底部导航条，从而实现遮挡底部导航的效果。需要注意的是，这种方法可能会影响用户体验，并且需要保证用户能够方便地返回到其他页面。
3 使用小程序组件库
一些小程序组件库可能提供了类似于 Canvas 的绘图组件，并且可以支持遮挡系统底部导航的功能，可以尝试使用这些组件库中提供的组件实现相应的效果。
总之，需要根据具体的业务需求和实际情况选择合适的方法来实现相应的效果。
最近在微信小程序开发中需要用到canvas绘制中国象棋的的棋盘棋子，该需求用来复盘对弈记录，由于复盘的每一步都是用fen串 （参考：FEN文件格式） 来转换出所有棋子的位置，所以每一步都会将棋子重新绘制一遍，为了避免显示上一次步绘制i的内容需要先清空canvas再绘制新的棋子，清空和重新绘制的过程就会出现闪屏的现象，所以每次点上一步下一步的时候都会闪一下，体验很不好。
为了解决这个问题，搜索了一些解决方案，最终决定参考双缓存 《在Canvas clearRect中引起的闪屏怎么解决？双缓存解决闪屏问题详解！》 的方式解决这个问题。
由于棋子元素过多，每一颗棋子都要调用一次drawImage，且新版的canvas是异步进行的，如果不采用缓存的方式，看起来不仅有闪烁的现象还会有一种棋子一个一个出现的感觉。现将内容绘制好生成，在另一个canvas中只需要绘制这一张并覆盖之前的内容，而不需要清空，这样就避免了闪屏的问题。
效果对比：
如果有更好的方案，请不吝赐教。
Canvas 组件表示屏幕上一个空白矩形区域，应用程序可以在该区域内绘图，或者可以从该区域捕获用户的输入事件。
应用程序必须为 Canvas 类创建子类，以获得有用的功能（如创建自定义组件）。必须重写paint 方法，以便在 canvas 上执行自定义图形。
举例：
Paneladd(new MyCanvas());//往panel中添加画布canvas
class MyCanvas extends Canvas {//定义一个canvas
public MyCanvas () {
setBackground (ColorGRAY);//设置背景为灰色
setSize(300, 300);//定义canvs大小是300300
}
public void paint (Graphics g) {//画布的paint方法，
Graphics2D g2;
g2 = (Graphics2D) g;
g2drawString ("It is a custom canvas area", 70, 70);//屏幕输出该字符串
}
}
最近有一个需求说是需要换颜色。
最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧。一般般
主要代码还是copy别人的。这里就写一下，当记录
1、canvas的getImageData所生成的组成
根据循环可以得出
组成是ARGB格式，第一个是透明度，后续rgba
2、得出的循环需要按4的倍数进行循环，否则至少是卡死的地步
for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === 95) pdata[j] = colorArr[0]; if (pdata[j - 1] === 170) pdata[j-1] = colorArr[1]; if (pdata[j - 2j] === 129) pdata[j-2] = colorArr[2]; } 复制代码
3、注意替换颜色应该是倒序
所以0,1,2,3的顺序
替换的rgb颜色应该是3,2,1
得到数组rgb：data[i],data[i-1],data[2]
替换方式看上面代码
4、完整代码格式
<!DOCTYPE html> <html> <style> #btn { width: 100px; height: 50px; background: coral; position: fixed; top: 0; } </style> <head> <script type="text/javascript"> var c, ctx,myImage; function displayImage() { myImage = new Image(); myImagesrc = "1719ebbc83be39f0webpjpg"; c = documentgetElementById("myCanvas"); if (cgetContext) { ctx = cgetContext("2d"); myImageonload = function() { ctxdrawImage(myImage, 0, 0); } } } //colorArr 替换后的颜色 // 替换前的颜色 function getColorData(colorArr, color2) { imageD = ctxgetImageData(0, 0, myImagewidth, myImageheight); var pdata = imageDdata; for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === color2[0]) pdata[j] = colorArr[0]; if (pdata[j + 1] === color2[1]) pdata[j + 1] = colorArr[1]; if (pdata[j + 2] === color2[2]) pdata[j + 2] = colorArr[2]; } ctxputImageData(imageD, 0, 0); } function colorChange() { // rgb颜色 getColorData([102, 51, 153], [95, 170, 129]); } </script> </head> <body onload="displayImage()"> <p>原始：</p> <img id="myPhoto" src="1719ebbc83be39f0webpjpg"> <p>Canvas：</p> <canvas id="myCanvas" width="200" height="200"></canvas> <button id="btn" onclick="colorChange()">变颜色啦！</button> </body> </html>
以上就是关于小程序canvas绘制并保存图片全部的内容，包括:小程序canvas绘制并保存图片、支付宝&微信小程序Canvas生成图片、小程序canvas能遮住系统底部导航吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）