原理:canvas生成图片再保存到手机

JS

onShow: function () {
var that = this;
//1. 请求后端API生成小程序码
// that.getQr();
//2. canvas绘制文字和图片
const ctx = wx.createCanvasContext('myCanvas');
var imgPath = '../../image/bn.jpg'
var bgImgPath = '../../image/l11.png';
var xcxm = '../../image/xcxm.jpg';
var baibg = '../../image/baibg.png';
ctx.drawImage(baibg, 0, 0, 600, 1800);
ctx.drawImage(imgPath, 0, 0, 400, 200);
ctx.setFillStyle('white')
//ctx.fillRect(0, 520, 600, 280);
//ctx.drawImage(imgPath, 30, 550, 60, 60);
ctx.drawImage(bgImgPath, 5, 210, 60, 60);
// ctx.drawImage(imgPath, 100, 0, 160, 160);
ctx.setFontSize(14)
ctx.setFillStyle('#6F6F6F')
ctx.fillText('辛辣天赛', 65, 245)
ctx.setFontSize(16)
ctx.setFillStyle('#464646')
ctx.fillText('考考姚蜜', 10, 290)
ctx.setFontSize(16)
ctx.fillText('涩开一塔米', 10, 310)
ctx.setFontSize(14)
ctx.fillText('长按扫码查看详情', 10, 340)
ctx.drawImage(xcxm, 190, 260, 80, 80);
ctx.draw()
},
save:function(){
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 900,
height: 1200,
destWidth: 900,
destHeight: 1200,
canvasId: 'myCanvas',
quality:1,
success: function (res) {
console.log(res.tempFilePath);
var dz= res.tempFilePath
/* that.setData({
shareImgSrc: res.tempFilePath
})*/
wx.saveImageToPhotosAlbum({
filePath: dz,
success(res) {
wx.showModal({
title: '存图成功',
content: '图片成功保存到相册!',
showCancel: false,
confirmText: '好哒',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
// that.hideShareImg()
}
})
}
})
},
fail: function (res) {
console.log(res)
}
})
},
WXML
<canvas canvas-id='myCanvas' id='oo'></canvas>
<view id='pp'></view>
<view id='pp1' bindtap='save'>保存图片</view>
CSS
#oo{
width: 300px;
height: 380px;
display: block;
margin: 0 auto;
position: relative;
z-index: 99;
background: white;
margin-top: 60px;
border-radius: 6px;
overflow: hidden;
}
#pp{
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
z-index: 98;
}
#pp1{
width: 100px;
height: 40px;
position: fixed;
background: rgba(0,0,0,0.5);
top: 460px;
left: 50%;
margin-left: -50px;
z-index: 99;
background: skyblue;
color: white;
font-size: 16px;
text-align: center;
line-height: 40px;
border-radius: 8px;
}

微信小程序分享朋友圈的更多相关文章

  1. 微信小程序分享朋友圈的实现思路与解决办法

    实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话 ...

  2. 微信小程序分享朋友圈 长海报 canvas 动态高度计算

    业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 g ...

  3. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  4. golang-vue实现微信小程序分享到朋友圈

    最近涉及到微信小程序分享到朋友圈,不知道微信为什么不直接接口分享,咱也不敢佛,咱也不敢问,只能百度问度娘,看官方文档,网上的一些分享五花八门,每一个重点的,所以整理了一下到底怎样生成二维码分享图片才是 ...

  5. 微信小程序分享至朋友圈的方法

    最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至 ...

  6. 微信小程序--分享功能

    微信小程序--分享功能 微信小程序前段时间开放了小程序右上角的分享功能, 可以分享任意一个页面到好友或者群聊, 但是不能分享到朋友圈 这里有微信开发文档链接:点击跳转到微信分享功能API 入口方法: ...

  7. 关于微信小程序分享/转发功能的实现方法

    实现微信小程序分享,可以有两个入口: 1. 小程序右上角菜单自带的分享 这个入口是默认关闭的,需要在当前页面中调用showShareMenu方法,开启分享 onLoad: function () { ...

  8. 微信小程序分享转发用法大全——自定义分享、全局分享、组合分享

    官方提供的自定义分享 使用隐式页面配置函数实现的全局分享-推荐 使用隐式路由实现的全局分享-不推荐,仅供了解隐式路由 前言: 目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置 ...

  9. 微信小程序分享支持自定义封面图

    微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指 ...

随机推荐

  1. Hbase常见错误解决方法

    Hbase常见错误解决方法 原文转载至:https://www.jianshu.com/p/5fd74812c56c   我是通过maven管理的依赖,直接修改maven依赖中hbase的版本就可以了 ...

  2. ArcGIS紧凑型缓存存储格式分析

    by 蔡建良 2018-8-24 网络中我看到的网文将bundle存储切片数据的方式都没说清或是说错.按照错误方法一样可以在桌面浏览,但在arcgis for android却无法浏览. bundlx ...

  3. 【算法习题】正整数数组中和为sum的任意个数的组合数

    1.递归实现(参考:https://blog.csdn.net/hit_lk/article/details/53967627) public class Test { @org.junit.Test ...

  4. ocr_vote disk损坏恢复

    1. 检查votedisk和 ocr备份[root@rh6rac1 bin]./ocrconfig -showbackuprh6rac1     2019/03/19 16:57:40     /or ...

  5. udt的java实现

    udt协议是什么? 我就不回答了,可以网上搜索,一直都是c++的,java的实现已经很久没有修改了 经过测试,java版本有些一问题,现在已经将其修复,已经上传到csdn 另外自己根据实际的应用,再次 ...

  6. SpringBoot+Mybatis+Maven+MySQL逆向工程实现增删改查

    SpringBoot+Mybatis+MySQL+MAVEN逆向工程实现增删改查 这两天简单学习了下SpringBoot,发现这玩意配置起来是真的方便,相比于SpringMVC+Spring的配置简直 ...

  7. 【学习】Python进行数据提取的方法总结【转载】

    链接:http://www.jb51.net/article/90946.htm 数据提取是分析师日常工作中经常遇到的需求.如某个用户的贷款金额,某个月或季度的利息总收入,某个特定时间段的贷款金额和笔 ...

  8. python大法好——ython GUI编程(Tkinter)

    Python GUI编程(Tkinter) Python 提供了多个图形开发界面的库,几个常用 Python GUI 库如下: Tkinter: Tkinter 模块(Tk 接口)是 Python 的 ...

  9. Django03-视图系统views

    一.编写视图 一个视图函数,是一个简单的Python函数,它接受web请求,并且返回web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . . 是 ...

  10. Linux命令:source

    语法 source filename 说明 . 的同义词