微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册

1.获取手机宽度进而设置canvas画布的宽度

onLoad() {let that = this;// 获取系统信息，设置canvas宽高wx.getSystemInfo({success(res) {that.setData({canvasWidth: res.windowWidth})}}) },

2.获取图片信息将图片保存到本地路径然后再去绘制, 不然容易出现canvas画不上然后保存图片到本地时候出现空白的问题

  make:function(url){var that=this;console.log(url);//获取图片信息wx.getImageInfo({src: url,success: function(res){console.log(JSON.stringify(res));that.setData({imgInfo:res});console.log(JSON.stringify(that.data.imgInfo));let imageSize = util.imageZoomHeightUtil(that.data.imgInfo.width, that.data.imgInfo.height);//根据屏幕宽度that.setData({ canvasHeight: imageSize.imageHeight });console.log('imageSize等比例' + JSON.stringify(imageSize));that.makeCanvas(url);}})},

3.开始绘制图 ctx.draw(false, this.drawCallBack)一定要执行后面的回调函数

makeCanvas: function (url) {var ctx = wx.createCanvasContext('canvas')ctx.drawImage(url, 0, 0, this.data.imgInfo.width, this.data.imgInfo.height, 0, 0, this.data.canvasWidth, this.data.canvasHeight);ctx.draw(false, this.drawCallBack)},drawCallBack: function () {var that = thiswx.canvasToTempFilePath({x: 0,y: 0,width: that.data.canvasWidth,height: that.data.canvasHeight,canvasId: 'canvas',fileType: 'jpg',success: function (res) {// wx.hideLoading();that.setData({'img': res.tempFilePath});console.log('ok');},fail: function (res) {wx.hideLoading();wx.showToast({icon: 'none',title: '生成失败!',});}})},

完整demo源码下载地址：https://download.csdn.net/download/lmx15063393957/11259093

微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册相关推荐

微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
一.简介在微信小程序开发中,有时候需要手写签名生成图片上传服务器.制作一个手绘板.画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard. DZMDrawingBoard 通过 Ca ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序使用canvas绘图并下载
微信小程序使用canvas绘图并下载实现的功能: canvas绘制页面当前页面可下载文字自动换行实现的效果最终如下图所示: 在这里插入图片描述实现步骤: 1.页面初始化获取屏幕尺寸 onLo ...
微信小程序开发之路（十三）正式开工--设计ER图与数据库的创建
微信小程序开发之路(十三)正式开工–设计ER图数据库的创建先制作班费公是示功能我们在项目的 settings.py 文件中找到 DATABASES 配置项,将其信息修改为: DATABASES = ...

微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册

微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册相关推荐

最新文章

热门文章

微信小程序 实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册

微信小程序 实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册相关推荐

最新文章

热门文章

微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册

微信小程序实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册相关推荐