小程序canvans一键截屏纯前端实现

小程序canvas一键截屏，生成图片并保存，提供源码

核心代码如下，大家可以参考一下

downImg(list) {var that = thislet imglist = []let n = 0function up() {wx.downloadFile({url: list[n],success(res) {if (res.statusCode == 200) {imglist.push(res.tempFilePath)n++if (n == list.length) {that.setData({newList: imglist,})that.Canvas(that)} else {up(n)}}}})}up()// return imglist},/*** 创建画布内容*/Canvas(that) {const ctx = wx.createCanvasContext('myCanvas');var that = this//绘制背景ctx.drawImage(that.data.newList[2], 0, 0, this.data.systemInfo.screenWidth, this.data.systemInfo.windowHeight);//绘制bannerctx.drawImage(that.data.newList[3], that.rem(10), that.rem(20), that.rem(730), that.rem(400))ctx.setFontSize(that.rem(26))ctx.setTextAlign('left')ctx.setFillStyle('white')//绘制证书解析标题ctx.fillText('证书解析：', that.rem(32), that.rem(500))ctx.draw(true)that.forlist(that.data.resultlist, that, ctx)},forlist(list, that, ctx) {for (let t = 0; t < list.length; t++) {that.drawtitle(ctx, list[t].title, t, that)that.tostringLength(list[t].title, t, list[t].main, 20, ctx, that)}ctx.draw(true)wx.hideLoading()that.setData({isShow: false})},erweima() {wx.previewImage({current: 'http://www.kiss-me.top/20181103113050.jpg', // 当前显示图片的http链接urls: ['http://www.kiss-me.top/20181103113050.jpg'] // 需要预览的图片http链接列表})},save() {var that = thisif (that.data.savatext == '重新测试') {wx.reLaunch({url: '/pages/index/index'})} else {wx.showLoading({title: '正在保存...',mask: true,success: function(res) {},fail: function(res) {},complete: function(res) {},})setTimeout(function() {wx.canvasToTempFilePath({x: 0,y: 0,width: that.data.systemInfo.screenWidth,height: that.data.systemInfo.screenHeight,canvasId: 'myCanvas',success: function(res) {app.globalData.imgurl = res.tempFilePathwx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.hideLoading()wx.showToast({title: '保存成功!',icon: '',image: '',duration: 2000,mask: true,success: function(res) {},fail: function(res) {},complete: function(res) {},})that.setData({savatext: '重新测试'})},fail(res) {},complete(res) {}})}})}, 1500)}},drawtitle(ctx, textmain, t, that) {//根据奖状的名字长度设置奖状样式ctx.drawImage(textmain.length > 4 ? that.data.newList[1] : that.data.newList[0], that.rem(60 + 219 * t), that.rem(200), that.rem(194), that.rem(132))ctx.setTextAlign('left')ctx.setFillStyle('#2862AB')ctx.draw(true)//字的展示形式if (textmain.length <= 3) {ctx.setFontSize(that.rem(55))ctx.fillText(textmain, that.rem(75 + 219 * t), that.rem(260))} else {ctx.setFontSize(that.rem(42))ctx.fillText(textmain.substr(0, 4), that.rem(75 + 219 * t), that.rem(255), that.rem(194))ctx.fillText(textmain.substr(4, 2), that.rem(75 + 219 * t), that.rem(300), that.rem(100))}ctx.draw(true)},tostringLength(title, n, textmain, length, ctx, that) {//设置证书类型解释框ctx.setFillStyle('white')ctx.draw(true)ctx.drawImage(that.data.newList[4], that.rem(32), that.rem(550 + 130 * n), that.rem(160), that.rem(40))ctx.draw(true)ctx.setFontSize(that.rem(26))ctx.setTextAlign('center')ctx.setFillStyle('#2862AB')ctx.draw(true)ctx.fillText(title, that.rem(110), that.rem(580 + 130 * n), that.rem(150))if (textmain.length / length > 1 && textmain.length / length < 2) {ctx.setTextAlign('left')ctx.setFillStyle('white')ctx.fillText(textmain.substr(0, length), that.rem(210), that.rem(580 + 130 * n), that.rem(500))ctx.fillText(textmain.substr(length, length), that.rem(210), that.rem(610 + 130 * n), that.rem(500))}if (textmain.length / length < 1) {ctx.setTextAlign('left')ctx.setFillStyle('white')ctx.fillText(textmain.substr(0, length), that.rem(210), that.rem(580 + 130 * n), that.rem(500))}if (textmain.length / length > 2 && textmain.length / length < 3) {ctx.setTextAlign('left')ctx.setFillStyle('white')ctx.fillText(textmain.substr(0, length), that.rem(210), that.rem(580 + 130 * n), that.rem(500))ctx.fillText(textmain.substr(length, length), that.rem(210), that.rem(610 + 130 * n), that.rem(500))ctx.fillText(textmain.substr(2 * length, length), that.rem(210), that.rem(640 + 130 * n), that.rem(500))}if (textmain.length / length > 3) {ctx.setTextAlign('left')ctx.setFillStyle('white')ctx.fillText(textmain.substr(0, length), that.rem(210), that.rem(580 + 130 * n), that.rem(500))ctx.fillText(textmain.substr(length, length), that.rem(210), that.rem(610 + 130 * n), that.rem(500))ctx.fillText(textmain.substr(2 * length, length), that.rem(210), that.rem(640 + 130 * n), that.rem(500))ctx.fillText(textmain.substr(3 * length, length), that.rem(210), that.rem(670 + 130 * n), that.rem(500))}ctx.drawImage(that.data.newList[5], that.rem(580), this.data.systemInfo.windowHeight - that.rem(210), that.rem(130), that.rem(180))ctx.draw(true)},

生成的图片效果如下，纯前端项目，把appid修改一下即可体验

项目地址如下
https://gitee.com/Q_Augly/measuring_one_test.git
https://gitee.com/Q_Augly/canvasTset.git

小程序canvans一键截屏纯前端实现相关推荐

微信小程序获取用户信息（纯前端）
特别说明 2022年10月25日起,小程序 wx.getUserProfile 接口将被收回. 微信官方不希望开发者直接拿用户的昵称和头像,若小程序需要设置昵称和头像,可以单独开发一个设置页,由用户手 ...
微信小程序 - 搜索历史记录功能（纯前端）
前言网上大部分教程提供的代码都非常臃肿且 BUG 多,本文以最健壮的代码实现该功能. 本示例可直接用于您的项目,利用缓存特性可永久存储(除非用户手动清除缓存), 完成了搜索后自动写入历史.排序最新在 ...
还不会小程序开发？适用于新手、前端、后端、全栈的小程序开发保姆级教程！
2017年,那个男人微信之父"龙哥",在公开课上提出"小程序".那时大家都还在享受移动互联网所带来的便捷体验,对于微信这个庞然大物所倡导的新物种显然是有点不知所 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
【疯狂诗词大会小程序2.0】功能模块+前端+诗词答题小程序+内置数千道题目+开箱即用
源码简介与安装说明: 模块介绍: 诗词答题小程序,支持单项选择题.文字线索题.看图猜诗词.读诗句猜谜等题目类型. 内置数千道题目,开箱即用.随机出题,先易后难. 诗词同步学,每一道诗题都配备了优质的诗 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
自定义悬浮球，提供一些快捷操作。比如一键静音，一键锁频，一键截屏，一键回桌面，手电筒等
FloatingBall 项目地址:killer8000/FloatingBall 简介:自定义悬浮球,提供一些快捷操作.比如一键静音,一键锁频,一键截屏,一键回桌面,手电筒等更多:作者提 ...
苹果笔记本装windows10后，如何一键截屏并保存到onedrive中？
苹果macbook pro,为了工作方便装了win10. 前几天在开线上会的时候,有些内容需要记录下,突然发现不会使用苹果本截屏快捷键,于是用QQ截屏凑合用了. 晚上回到家,终于找到了苹果本在win1 ...
小程序swiper切换闪屏问题
小程序swiper滑动闪屏问题在小程序开发过程中使用swiper做轮播图,发现当用户切换图片过快时会出现异常的闪屏现象,官方文档中描述了这个Bug & Tip: 在电脑上测试的时候没有问题 ...

小程序canvans一键截屏纯前端实现

小程序canvas一键截屏，生成图片并保存，提供源码

小程序canvans一键截屏纯前端实现相关推荐

最新文章

热门文章