微信小程序绘制分享图例子:

demo下载地址:https://gitee.com/v-Xie/wxCanvasShar

大致代码会再以下说明

实际开发项目:

基础知识点:

了解canvas基础知识

wx.createCanvasContext()//微信小程序创建画布

wx.canvasToTempFilePath()//将画布canvas转为图片

wx.saveImageToPhotosAlbum() //微信小程序保存至相册

canvas绘制以及绘制过程中的坑:(请看后面的代码部分)

1.绘制头像后之后绘制的内容不显示

2.头像地址换成网络地址后无法显示

3.实现多行文本换行并且获取绘制的文本的高度

<!--index.wxml-->
<view class="container">
<!-- 画布 -->
<!-- canvas -->
<canvas canvas-id="myCanvas" style="width:300px;height:320px;position:fixed;top:40px;"></canvas> <!-- 要保存至相册的图片 --> <view class='imagePathBox'>
<text>要分享的图片</text>
<image src="{{imagePath}}"></image>
</view> <button bindlongpress='baocun'>长按保存分享</button>
</view>
//index.js
const app = getApp() Page({
data: {
imagePath:'',
imgurl:'https://aecpm.alicdn.com/simba/img/TB1p4s3GVXXXXb6XVXXSutbFXXX.jpg'
}, onLoad: function() {
// 调用画布
// this.createNewImg();
var self=this;
wx.downloadFile({
url: self.data.imgurl,
success: function (res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log(res, "rrrr")
self.setData({
imgurl: res.tempFilePath
})
console.log('头像临时路径=====');
console.log(self.data.imgurl); // self.createNewImg(); // 调用canvas绘制的结果图
}
}
})
setTimeout(function(){
self.createNewImg();
},500);
},
/*
绘制圆行头像 clip()从原始画布中剪切任意形状和尺寸。
坑点:1.绘制头像后之后绘制的内容不显示
2.头像地址换成网络地址以后无效
提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。
解决方案:坑1:
原因:clip()造成
解决方案:可在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,
并在以后的任意时间通过 restore() 方法对其进行恢复
坑2:
原因:1.未将网络地址转换为临时路径 2.未配置download选项的合法域名
解决方案:wx.downloadFile()实现临时路径转换,并配置合法域名
*/
circleImg(ctx, img, x, y, r) {
ctx.save();
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
},
/*
如何实现多行文本分段 语法: ctx.fillText('文本','文本的左上角x坐标位置','文本的左上角y坐标位置');
startXpoint:文本左上角x坐标位置
startYpoint:左上角y坐标位置
textHeight:文本与顶部基线距离[文本高度]
canvasWidth:画布大小
fontSize:文本字体大小
lineHeight:行高
*/
drawText(ctx, str, startXpoint, startYpoint, textHeight, canvasWidth, fontSize, lineHeight) {
var textWidth = 0;
var lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
textWidth += ctx.measureText(str[i]).width;
if (textWidth > canvasWidth) {
ctx.font = "normal 14px Arial";
ctx.fillStyle = 'green';
ctx.fillText(str.substring(lastSubStrIndex, i), startXpoint, startYpoint); //绘制截取部分
startYpoint += fontSize; //16为字体的高度
textWidth = 0;
lastSubStrIndex = i;
textHeight += lineHeight;
}
if (i == str.length - 1) { //绘制剩余部分
ctx.fillText(str.substring(lastSubStrIndex, i + 1), startXpoint, startYpoint);
}
}
// 绘制后文本的高度
return textHeight
},
/*
1.绘制画布
2.将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
*/
createNewImg: function () {
var self = this;
var ctx = wx.createCanvasContext('myCanvas'); // 初始要画一个相当于画布大小的容器
//设计稿分享图多大,画布就多大
ctx.strokeStyle = "#ccc";
ctx.strokeRect(0, 0, 300, 320); //绘制矩形
//语法:填充型fillRect(x,y,w,h) 或 描边型strokeRect(x,y,w,h) x,y坐标起点 w:矩形宽度 h:矩形高度
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 50, 40); ctx.strokeStyle = "blue";
ctx.strokeRect(140, 20, 50, 40); //绘制线条
//语法:moveTo(x,y)线条起始坐标 (同样可以用来改变画笔的起始坐标点) lineTo(x,y);线条结束坐标
ctx.moveTo(20, 80);
ctx.lineTo(200, 100);
ctx.textWidth = 10;//线条宽度
ctx.lineCap = 'round'//lineCap 线段端点显示的样子 ,值为butt,round 和 square。默认是 butt
ctx.strokeStyle = "green";
ctx.stroke(); //绘制圆
//语法:arc(x,y,r,start,stop) x,y圆心中心点坐标 r:半径 start: 起始角度 stop:结束角度
ctx.beginPath();//重新创建路径
ctx.arc(40, 130, 30, 0, 2 * Math.PI);
ctx.strokeStyle = "purple";
ctx.textWidth = 4;//描边宽度
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke(); //绘制文本
//语法:fillText(text, x, y, [maxWidth]) strokeText(text, x, y, [maxWidth])
ctx.font = "normal 18px Arial";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = 'blue';
ctx.fillText("绘制文本", 120, 140);
ctx.strokeText("绘制文本", 120, 170);//没有设置新的strokeStyle或textWidth等时会自动继承上一个strokeStyle或textWidth等
// ctx.textWidth = 1;//strokeStyle或textWidth
// ctx.strokeStyle = "green";
ctx.strokeText("绘制文本", 120, 200); var img='../../images/2.jpg'; ctx.drawImage(img, 10, 170, 60, 70);
ctx.fillStyle = 'red';
this.circleImg(ctx,img,200,20,40); ctx.fillText("继续啊", 240, 140); ctx.drawImage(self.data.imgurl, 180, 150, 100, 80); var text ="把握大好时机,认真理性投资。用自己的才华和智慧积极进取。把握大好时机,认真理性投资。用自己的才华和智慧积极进取。";
self.drawText(ctx, text, 160, 260, 0, 260, 14, 0); ctx.save(); // 保存当前ctx的状态 ctx.restore();
ctx.draw(); setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 320,
destWidth: 300 * 2,//生成图片的大小设置成canvas大小的二倍解决模糊
destHeight: 320 * 2,
canvasId: 'myCanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
self.setData({
imagePath: tempFilePath
});
wx.hideToast();
console.log('canvas图片地址:' + self.data.imagePath);
}
});
}, 600);
}, //点击保存到相册
baocun: function () {
var self = this;
wx.saveImageToPhotosAlbum({
filePath: self.data.imagePath,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}, fail: function (res) {
console.log(res)
}
})
}
})
}, })

微信小程序绘制分享图的更多相关文章

  1. 微信小程序中-折线图

    echarts配置项太多了,还是一点点积累吧~~~~~ 当然前提条件还是得老老实实看echarts官方文档 :https://echarts.baidu.com/ 今天主要就介绍下我在工作中通过ech ...

  2. mpvue开发微信小程序,分享按钮报错:`Cannot read property &#39;apply&#39; of null`

    用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...

  3. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  4. 微信小程序开发--背景图显示

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image ...

  5. 微信小程序-实现分享(带参数)

    微信小程序分享功能的实现方法有两种: 第一种 在page.js中实现onShareAppMessage,便可在小程序右上角选择分享该页面 onShareAppMessage: function () ...

  6. 微信小程序------轮播图

    swiper 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper' ...

  7. 微信小程序全局设置分享内容

    微信小程序每个页面都可以在onShareAppMessage中设置分享内容,如果想要全局设置成一样的分享内容如何设置呢? 在app.js中新增以下方法: //重写分享方法 overShare: fun ...

  8. 微信小程序之分享功能

    说到分享 大家都会想到手机右上角点击不就分享了么?对的没错,那样是分享转发的是小程序  而不是指定的某个页面,所以自己动手丰衣足食,自己写一个转发功能被, 其实也没那么可怕,主要参考的是微信小程序AP ...

  9. 教你如何一键反编译获取任何微信小程序源代码(图形化界面,傻瓜式操作)

    一键获取微信小程序源代码 Tips: 一键获取微信小程序源码, 使用了C#加nodejs制作 直接解压在D盘根目录下后就可以使用 将小程序文件放到 wxapkg目录下3 这个目录下有一些demo 可以 ...

随机推荐

  1. 个人对JQuery Proxy()函数的理解

    转载至:http://www.cnblogs.com/acles/archive/2012/11/20/2779282.html JQuery.proxy(function,context): 使用c ...

  2. jsp提交表单数据乱码,内置对象,以及过滤器

    jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...

  3. WIN7开无线

    可以的,WIN7自身就带有这个功能的,不过默认是不开启的,也可以下载一个软件来弄.1.请却仍您使用的操作系统是微软的Windows 7或者Windows server 2008 R2,正版盗版皆可.( ...

  4. dojo.byId、dojo.query、dojo.attr

    概述: dojo.byId(/*string*/id或/*DomNode*/node) 1.传入DOMNode返回传入的domNode; 2.传入id返回id为当前值的domNode dojo.que ...

  5. Oracle历史记录

    请问如何查询ORACLE的历史操作记录!!!!!------解决方案-------------------- 有一个专门存储操作的数据库表..select t.SQL_TEXT, t.FIRST_LO ...

  6. 【转】 IntelliJ IDEA像Eclipse一样打开多个项目

    http://blog.csdn.net/zht666/article/details/47831893 我们做项目实际中经常会遇到这样的情况,创建一个common项目(Maven项目)作为公用项目, ...

  7. mysql_索引

    .默认情况下大多使用Btree索引,该索引就是通常所见 唯一索引.聚簇索引等等,Btree用在OLTP,加快查询速度 查询表索引 show  index  from  tablename 查询表结构 ...

  8. zookeeper下的基本操作

    安装好zk之后 启动服务端:在bin目录下 zkServer.sh restart 启动客户端 zkCli.sh 检查是否启动 直接输入jps命令,显示下面则表示启动成功 [root@iZbp12gg ...

  9. EnableAutoConfiguration注解的工作原理(org.springframework.boot.autoconfigure.EnableAutoConfiguration=core.bean.MyConfig)

    EnableAutoConfiguration注解的工作原理(org.springframework.boot.autoconfigure.EnableAutoConfiguration=core.b ...

  10. [转] Hadoop管理员的十个最佳实践

    前言 接触Hadoop有两年的时间了,期间遇到很多的问题,既有经典的NameNode和JobTracker内存溢出故障,也有HDFS存储小文件问题,既有任务调度问题,也有MapReduce性能问题.遇 ...