微信服务号分享图片(包括微信头像以及二维码)
最近一个产品需要是把微信服务号中一个网页内容生成一张图片,用户长按可以保存为图片,图片中的二维码可以识别,图片中包含用户头像。效果如图1-1
最常用的做法是把网页转换为cancas,接着转成图片,最流行的插件是html2canvas。官网的文档个人感觉不是特别好。html2canvas.hertzen.com/具体做法参考了此博客。segmentfault.com/a/119000001…。
图1-1
红色圆圈位置应该为微信头像的位置,web端获取不到用红圈代替。右下角二维码是根据后端数据渲染出来的动态二维码。
整个需求难点和坑分为几部分:
1.获取头像并且可以保存到canvas生成的img中(canvas对于跨域图片的处理一般是在原图片处显示空白---需要后端配合)
2.生成canvas比生成二维码或微信头像快,导致二维码没有附在canvas生成的整图中(异步处理,安排事件执行顺序)
3.设置canvas宽高为背景大图带小数的原始尺寸(通过offsetWidth width等获得的是取整之后的宽度 )以及偏移尺寸。
4.图片清晰度处理(设置canvas画布缩放比)
1.处理canvas中跨域的问题,微信头像和自己的服务器必然不在同一个域,那首先需要前端设置canvas的配置项,允许跨域。网上有几种做法可以参考
1.1将微信头像上传到自己服务器,再返回前段图片地址,就不会涉及跨域问题。
1.2在NGINX上设置反向代理,把微信头像域名地址换成自己服务器的。(但是一旦微信头像更新域名这种做法就会出bug )参考资料blog.csdn.net/mengruobaob…
location ^~ /wechat_image/ {add_header 'Access-Control-Allow-Origin' "$http_origin" always;add_header 'Access-Control-Allow-Credentials' 'true' always;add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified- Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;proxy_pass http://wx.qlogo.cn/;
}
复制代码
然后将微信的头像 wx.qlogo.cn/xxx => https://${自己的域名}/wechat_image/xxx和后端协商好下划线部分。
2.异步处理可以涉及很多内容,笔者自己也不是特别懂,此处不展开讲,下次专门出一篇异步的博客。此处处理将替换头像地址,生成动态二维码,canvas绘图按照前中后三步顺序执行,(没有做异步处理时,safiri中生成canvas比生成头像和生成二维码都快,导致最后的整图没有微信头像和二维码。)
3.生成canvas过程中会发现二维码的位置会在打开页面一秒左右往上方偏移一下,一开始以为是因为生成的画布以及图片和之前的dom节点高度不同,所以设置了画布高度时采用了getBoundingClientRect()获得实际dom元素宽高,以及生成画布过程中可能出现的偏移。
4.设置canvas的缩放scale。
代码如下:
// $(function() { function imgUrlChange(){ var wximg = $("#wximg").attr('src'); if(wximg){ var newimg = window.location.origin +'/wechat_image'+ wximg.split("http://thirdwx.qlogo.cn")[1]; }else{ console.log('微信头像没有读取到'); } $("#wximg").attr('src',newimg); } function shareQRCode () { return new Promise (function(resolve,reject){ setTimeout(function() { var shareid = $("#urldata").attr('uid'); var qrcode = new QRCode('qrcode', { text: 'your content',width: 90, height: 90, correctLevel: QRCode.CorrectLevel.H }); //使用 API qrcode.clear(); qrcode.makeCode(shareid); console.log(2); resolve(); },0) }) } function canvasImg (){ console.log(3) setTimeout(function(){ var cntElem = $('#html2canvas')[0]; var shareContent = cntElem;//需要截图的包裹的(原生的)DOM 对象 var cont = cntElem.getBoundingClientRect(); var width = cont.width; //获取dom 宽度 var height = cont.height; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点var scale = 2; //定义任意放大倍数 支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放 canvas.height = height * scale; //定义canvas高度 *缩放 var context = canvas.getContext("2d"); context.scale(scale, scale); //获取context,设置scalecontext.translate(-cont.left,-cont.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位 var opts = { scale: scale, // 添加的scale 参数canvas: canvas, //自定义 canvas // logging: true, //日志开关,便于查看html2canvas的内部执行流程 width: width, //dom 原始宽度 height: height, useCORS: true // 【重要】开启跨域配置 }; html2canvas(shareContent, opts).then(function (canvas) { // 【重要】关闭抗锯齿 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // 【重要】默认转化的格式为png,也可设置为其他格式 var image = canvas.toDataURL("image/png"); var pHtml = "<img src="+image+" />"; $('#html2canvas').html(pHtml); $('#html2canvas>img').css({ "width": 100 + "%", "height":height, }); }, 200) });
} imgUrlChange() shareQRCode().then(function() { canvasImg() }) // })复制代码
转载于:https://juejin.im/post/5c15f87751882545e24f018f
微信服务号分享图片(包括微信头像以及二维码)相关推荐
- 微信公众号怎么生成能追踪效果的二维码?
微号帮平台微信渠道二维码功能介绍:为了满足用户渠道推广分析的需要,微信公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,微信公众号可以接收到事件推送. 现在 ...
- 微信小程序分享生成海报(自带二维码)+头像+昵称
前言: 我的分享海报是弹框,可根据自己要求写成页面,原理都是一样的,背景图是前期测试的,效果是OK的,真机测试手机也是显示的. 效果图: wxml: <!-- 生成海报 --><vi ...
- 微信公众号怎么生成带统计的渠道二维码
公众号生成带统计的渠道二维码,通过公众号开发接口生成带参数的二维码实现,记录粉丝关注取关的结果,包含粉丝昵称.粉丝头像等都是公众号平台提供的接口开发.微号帮平台现有功能渠道二维码生成实现,也可以自己开 ...
- 【小程序开发原创】小程序裁剪图片上传头像,二维码源码
微信小程序 图片裁剪工具,简单易用 项目需求 在做微信小程序的时候有个图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,做了一个简单的图片 ...
- 实例:用C#.NET手把手教你做微信公众号开发(12)--带参数二维码裂变推广
为什么能裂变推广是营销学和心理学的范畴了,这里举个简单的例子来介绍.公众号有足以吸引粉丝的地方,要么是知识.要么是优惠.要么是服务,反正不同于其他人,能够吸引人关注:有了这个前提,怎么让更多的人知道这 ...
- 微信公众号开发----生成带参数的临时二维码
本文只提供代码实现,具体参数含义请先仔细阅读微信公众号技术文档之生成带参数的二维码 临时二维码请求说明: 一.常量类 public class WechartConst {//生成带参数的二维码pub ...
- 随便记录一下:微信公众号后台管理系统,获取需要扫描的二维码
今天心血来潮,看了一下微信扫码登陆.这里记录一下,重申一下–做事需要耐心!!! 微信公众号官网:mp.weixin.qq.com 我们需要分析的是二维码图片如何拿到了,当然,强大的f12绝对可以, 拿 ...
- 微信长按图片无法弹出识别二维码选项解决方案
1.首先页面中有两个二维码的兄弟别忙活了,一个页面中只可以识别其中一个二维码,两个的话需提示用户双击放大二维码进行二维码识别. 2.网页内有一张图片进行二维码识别时长按没有反应(长按图片无法弹出识别二 ...
- java实现微信支付宝等多个支付平台合一的二维码支付(SSM框架)
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] ♪ 点击上方绿标 收听java实现微信支付宝等多个支付平台合一的二维码支付(SSM框架) 整体思路: 实现微信支付宝等支付平台合多为一的二 ...
最新文章
- Kubernetes的ConfigMap说明
- java中比较字符串的大小用String的compareTo()
- WebRTC Audio Encoder/Decoder Factory 的实现
- Docker(一)Centos7.0安装Docker
- python装饰器系列(五)
- NUC1931 Problem D 区间素数【素数筛选】
- es6.0 java,es6.0.0源码idea启动问题
- python水仙花数判断程序
- ADAMSSimulink 机器人动力学仿真入门(一):使用Solidworks创建三维模型并导入ADAMS(代码已开源)
- python爬虫:用scrapy框架爬取链家网房价信息并存入mongodb
- 企业运维实践-Nginx使用geoip2模块并利用MaxMind的GeoIP2数据库实现处理不同国家或城市的访问最佳实践指南...
- 常用RGB颜色表 色值
- operating system not found的问题的解决办法 ---设置活动分区
- 【其他】kindle电子书脱壳转换格式
- 编译可在Android上运行的依赖库(二):gettext库
- 【51单片机实验笔记】3. LED点阵的基本控制
- 机器学习中对数据集进行拆分及模型训练
- Vue 使用 Vue-socket.io 实现即时聊天应用(实战篇 一)
- 就业报到证的常见问题解答汇总
- python中return cls用法详解
热门文章
- pandas数据分析航空公司数据
- uni-app自定义摄像头拍照添加人物框
- BAT都着力发展消费金融,相比之下有什么不同?
- hive 感染 蜂巢_『百科-角色』蜂巢(Hive),沃德就变成这个玩意了
- github 人像卡通化探索项目
- 笑死我了,看了第一个哥没能hold住
- 王者服务器未响应会封号吗,为什么被封号,心里没点数么?《王者荣耀》会被封号的行为盘点!...
- 酒店数据集退订分析与预测
- traditional: true异步请求后台接收不到参数需要将这个属性修改为true,默认为false
- count(*),count(1)和count(field)区别