微信小程序canvas保存绘制图片

上篇文章大概写了一下canvas绘制图片的问题，那么接下来记录一下canvas保存图片的问题~

wx.canvasToTempFilePath()
//把当前画布指定区域的内容导出生成指定大小的图片

那么我们首先来了解一下这个api的参数们：

除了起始位置及绘制图片的大小，那么需要注意的我已经标记出来了，其中很多其实也不能设置直接用默认值即可。
其中api的成功的回调中会返回生成文件的临时路径，那么我们拿到临时路径进行保存图片到本地就行了。

wx.saveImageToPhotosAlbum()
//保存图片到系统相册。

保存图片到系统相册的api参数：

这个地方需要注意的是要保存的filePath，图片文件路径，可以是临时文件路径或永久文件路径，不支持网络图片路径。

那么由canvas产生要保存的临时路径，然后用保存图片到系统的api进行保存即可，代码如下：

canvasSave(){let that = this;//注意这个地方因为我绘制的大小就是我要保存的区域，所以我直接用了默认的横纵坐标和画布区域wx.canvasToTempFilePath({canvasId: 'firstCanvas',success(res) {console.log(res.tempFilePath);saveImg(res)},fail: function() {console.log('fail-downloadFile')}})let saveImg = function(resourse) {console.log("保存图片：",resourse);wx.saveImageToPhotosAlbum({filePath: resourse.tempFilePath,success: function(res) {console.log(res)applyApi.toast('保存成功！')},fail: function(res) {console.log(res)}})}}

这样就解决了用canvas绘制图片并保存到本地的问题。

微信小程序canvas保存绘制图片相关推荐

微信小程序canvas 2d 绘制图片与文字导出图片
wxml内容如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
微信小程序canvas把正方形图片绘制成圆形
在微信小程序里效果图: 直接代码: <canvas style="width: 400px; height: 400px;border:1px solid red" canv ...
小程序 canvas 2d 绘制图片并保存
获取canvas实例,使用的官方的代码.用一个变量canvas保存实例,后续保存时会调用. data () {return {canvas: null // 实例} }, onReady() {con ...
微信小程序Canvas画布绘制以及保存
<canvas canvas-id="firstCanvas" style="width: 320px;height: 500px;" bindlongt ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
微信小程序canvas生成头像图片空白问题
官方关于 wx.canvasToTempFilePath 的说明: 把当前画布指定区域的内容导出生成指定大小的图片.在 draw() 回调里调用该方法才能保证图片导出成功. https://devel ...
微信小程序之保存动态图片功能
效果图:(下面是电脑版,真机也可以调试成功) 1.调用wx.downloadFile方法下载图片到本地. wx.downloadFile({url: path,success: function(re ...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...

微信小程序canvas保存绘制图片

微信小程序canvas保存绘制图片相关推荐

最新文章

热门文章