小程序canvas生成图片保存本地

注意事项：1、canvas中的图片最好使用 wx.getImageInfo提前下载下来， 2、canvas在处于视图隐藏时期无法生成图片 3、canvas图片生成需要时间，所以出现生成图片不完整可使用定时器使其生成完成在展示

浅学Canvas画布生成

生成图片思路

一、wxml页面

 <canvas canvas-id="myShareCanvasTemp" style="width: 100%;height: 100%;" />

提示：可设置canvas的宽高

二、js页面

代码如下（示例）：

canvasDataTemp: function (obj) {var that = this//配置canvas适应不同机型var rpx;wx.getSystemInfo({//获取机型信息success: function (res) {rpx = res.windowWidth / 375}})const ctx = wx.createCanvasContext('myShareCanvasTemp')//获取画布id//绘制最大背景ctx.beginPath()// ctx.rect(0, 0, 345*rpx, 515*rpx)//填充一个矩形（x轴坐标,y轴坐标,矩形宽,矩形高）,strokeRect:画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色ctx.setFillStyle('#ECFAFD')this.roundRect(ctx, 0, 0, 345 * rpx, 515 * rpx, 8 * rpx); //（ctx canvas上下文，x坐标，y坐标，宽度，高度，圆角的半径）// ctx.fill()//当一个图形画在另一个图形中，需要使用ctx.closePath()关闭画笔位置在另起ctx.beginPath()画笔位置，要不然会报错ctx.closePath()ctx.beginPath()//绘制两个大的白色背景ctx.rect(7 * rpx, 7 * rpx, 332 * rpx, 175 * rpx) //填充一个矩形（x轴坐标,y轴坐标,矩形宽,矩形高）,strokeRect:画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色ctx.setFillStyle('#fff')ctx.fill()ctx.rect(7 * rpx, 185 * rpx, 332 * rpx, 250 * rpx)ctx.setFillStyle('#fff')ctx.fill()//把画板内容绘制成图片，并回调 画板图片路径ctx.draw(false, function () {//图片宽高比，0.625wx.canvasToTempFilePath({x: 0,y: 0,width: 345 * rpx, //画布大小height: 515 * rpx,destWidth: 345 * rpx * 10, //生成图片大小destHeight: 515 * rpx * 10,//*10  是放大图片大小增加生成图片清晰度canvasId: 'myShareCanvasTemp',//画布idsuccess: function (res) {if (!res.tempFilePath) {wx.showModal({title: '提示',content: '图片绘制中，请稍后重试',showCancel: false})}that.setData({shareImgPathTemp: res.tempFilePath,//生成图片路径// canvasHidden: false})wx.hideLoading() //影藏动画},fail: function (err) {console.log('图片生成失败')console.log('err', err)},complete: function (com) {console.log('shareImgPathTemp都会执行', com)}})})},

保存动作

//保存图片saveImg(e) {wx.showLoading({title: '保存中...',})console.log('e.currentTarget.dataset.url', e.currentTarget.dataset.url)//res.tempFilePath  生成的画板图片// 画板路径保存成功后，调用方法吧图片保存到用户相册wx.saveImageToPhotosAlbum({filePath: e.currentTarget.dataset.url, //res.tempFilePath//保存成功失败之后，都要隐藏画板，否则影响界面显示。success: (res) => {wx.showToast({title: '保存成功',icon: 'none'})},fail: (err) => {wx.showToast({title: '保存失败',icon: 'none'})console.log(err)},complete() {// setTimeout(() => {//   // wx.hideLoading()// }, 1200)}})},

技术小白开发实例，如有不对，欢迎指正交流

小程序canvas生成图片保存本地相关推荐

微信小程序之生成图片保存到相册
微信小程序之生成图片保存到相册需求概要电商项目中需要将自己小店的商品带上自己的小程序码生成海报,保存到本地,然后分享到万能的朋友圈,QQ空间,微博等等来广而告之- 如下图,三种海报格式轮播展示,左 ...
小程序canvas绘图保存至相册
基础知识点: 了解canvas基础知识 wx.createCanvasContext()//微信小程序创建画布 wx.canvasToTempFilePath()//将画布canvas转为图片 wx. ...
微信小程序之生成图片保存到相册 1
需求概要电商项目中需要将自己小店的商品带上自己的小程序码生成海报,保存到本地,然后分享到万能的朋友圈,QQ空间,微博等等来广而告之... 如下图,三种海报格式轮播展示,左滑右滑切换到海报,点击下面保 ...
微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图
在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口.该接口符合 HTML Canvas 2D 的标准,实现上采用 GPU 硬件加速,渲染性能相比于现有的 Canvas 接口有一倍左右 ...
uni保存canvas图片_UniApp 用canvas生成图片保存本地
第一步:先定义一个canvas标签,如下. 第二步:获取图片在view中的高度和宽度,uni获取高度和宽度的方法,如下. let view = uni.createSelectorQuery().in ...
小程序Canvas生成图片draw()出现黑屏问题/不完整，安卓概率大
2019独角兽企业重金招聘Python工程师标准>>> 在当前小程序版本中对于Canvas空间绘制图片,存在bug,效率比较低. 导致图片回执完成慢.出现黑屏. 解决方案: 在调用d ...
微信小程序canvas生成图片为空白问题
项目中用canvas生成图片时都为空白,原因为 wx.canvasToTempFilePath必须写在wx.draw()的回调中才能实现 createImg ( imgPath) {//生成图片con ...
小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...

小程序canvas生成图片保存本地

小程序canvas生成图片保存本地

生成图片思路

一、wxml页面

二、js页面

小程序canvas生成图片保存本地相关推荐

最新文章

热门文章