在小程序里，我们知道分享功能只有分享到微信好友或者群，无法直接分享到朋友圈，但是我们可以生成分享，然后保存到相册，在发布朋友圈从相册选择，所以关键是如何生成需要的，使用canvas 画布即可实现。
canvas 是微信小程序里的原生组件，相关属性及注意事项可参考小程序官方文档 。一般生成分享需要显示文字和相应的，在结合不同位置和不同大小的需求形成特定样式的。
微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas
下面全是我一点点测试出的干货，耐心看：
1wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；
2wxcanvas不要当成真的H5canvas，就当它是个div就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；
3改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；
4css transform变换中的变大缩小也无法改变原画布上的东西大小
5官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>。
实际上，contextgetActions()后，context中的信息会被清空，如果想重复利用，需要var temp=contextgetActions()将 *** 作数组保存下来，才可重复用于wxdrawcanvas；
6注意
wxdrawCanvas({canvasId: 'target',actions: contextgetActions()});
默认会清空画布，想不清空需要
wxdrawCanvas({ canvasId: 'target', actions: contextgetActions(), reserve:true});
7《重点》
<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}px;height:{{height}}px'></canvas>
注意，disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动，catchtouchmove是不行的
上面的写法，ccvsMove和cvsMove会都触发，
ccvsMove返回的是普通touch事件对象，有pageX,clientX等，
cvsMove返回的是canvasTouch事件对象，没有pageX,clientX,只有x,y
8
wxdrawCanvas({ canvasId: 'target', actions: [], reserve:false});
可以清空画布和画布的状态
9画布的scale tranlate rotate等状态，在reserve:true时会接着上次的状态
10 contextgetActions()返回的数组很有用，打印出来你会发现里面的内容你都能看懂，可以直接修改数组改变画的动作
11wxdrawCanvas时contextdrawImage在手机上可以画出来，在电脑开发工具上画不出来
12wxcanvasToTempFilePath
官方文档中只有一行，原来
wxcanvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wxsaveFile差不多；wxcanvasToTempFilePath({ canvasId: 'target', success: function success(res) { wxsaveFile({ tempFilePath: restempFilePath, success: function success(res) { consolelog('saved::' + ressavedFilePath); }, complete: function fail(e) { consolelog(eerrMsg); } }); }, complete: function complete(e) { consolelog(eerrMsg); }});
最近有一个需求说是需要换颜色。
最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧。一般般
主要代码还是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小程序该效果，要求最终输出rgb值对象需要根据传入的rgb正确定位点的位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）