springboot 微信二维码样式修改 非https 不用nodejs处理
0，使用场景
1，显示在网页上
2，修改样式
3，其它方法
3.1 nodejs 用到fs模块【没试过】
3.2 配置https的方法解决
3.3 利用js的new Blob()和new FileReader() 【可以解决，感谢大佬】
4，错误方法记录
4.1 无法通过iframe获取子页面来修改
4.2 将href地址用base64转换再传输
5，最终方法

0，使用场景
公司不要点微信图标跳转页面扫码登录，想要将二维码直接显示在网页上
1，显示在网页上
将点击微信图标最终跳转的网页链接通过js弄到iframe的src上
2，修改样式
设置好iframe的src后二维码可以显示但是图片太大了，需要修改样式

微信开放文档上写可以传自定义css的地址，本地创建qrcode.css写在static下，

本地测试ok

http://localhost:8765/css/qrcode.css

于是iframe的链接最后加上：
+= "&href="+location.origin+"/css/qrcode.css"

上域名GG，因为域名不是https
3，其它方法
3.1 nodejs 用到fs模块【没试过】
https://www.ucloud.cn/yun/112827.html

https://blog.csdn.net/sinat_36193631/article/details/79595530
3.2 配置https的方法解决
https://www.jianshu.com/p/00314ced475e
3.3 利用js的new Blob()和new FileReader() 【可以解决，感谢大佬】
https://blog.csdn.net/weixin_43947294/article/details/88057285

灵感来源，将链接后面一串base64解译后是css代码而突发奇想
4，错误方法记录
4.1 无法通过iframe获取子页面来修改
var x = document.getElementById("微信iframe的id")[0];
var y = x.contentWindow || x.contentDocument;
y.body.style.backgroundColor = "red"

然后出错，


4.2 将href地址用base64转换再传输
Css中路径data:image/png;base64的用法详解（看支持类型

用JS进行Base64编码、解码


let url = location.origin +"/css/qrcode.css"
iframeUrl += `data:text/css;charset=utf-8;base64,${window.btoa(url)}`;

没有阻止了但是样式没变化
5，最终方法
直接将css样式转换成base64加载href后面
let content = `
.impowerBox .qrcode {width: 140px;}
.impowerBox .title {display: none;}
.impowerBox .status {text-align: center;}`;
iframeUrl += "&href=" + `data:text/css;charset=utf-8;base64,${window.btoa(content)}`;
$("#qrcode_iframe").attr("src", iframeUrl);

新年快乐
记于2020，01，22 下午4时

面会菜（The Last Meal）- 林生祥
🎨

node.js下载地址
或者 用 代码 将text 转换为base64

<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
var obj = new WxLogin({
    self_redirect:false,
    id:"login_container", 
    appid: "wx28*******"你的appid, 
    scope: "snsapi_login", 
    redirect_uri: encodeURIComponent("回调地址"), 
    state: Math.ceil(Math.random()*1000), 
    style: "black",
    href: ""
});
</script>

href参数可以自定义样式 但是必须要https的地址 我们没有https 的地址

官方给了CSS 的样式
@charset "UTF-8";
.impowerBox .qrcode {width: 150px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 150px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;} 

我们可以参考一下 Data URI scheme

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
data:,文本数据

data:text/plain,文本数据

data:text/html,HTML代码

data:text/html;base64,base64编码的HTML代码

data:text/css,CSS代码

data:text/css;base64,base64编码的CSS代码

data:text/javascript,Javascript代码

data:text/javascript;base64,base64编码的Javascript代码

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

了解了 Data URI scheme 之后我们将css 进行base64加密

方法一

在线转换 base转换



转换完成以后 复制 base64 在字母开头加上 data:text/css;base64,

例如 data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsKLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE1MHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb

将生成的base 复制到href 里面
方法二

使用node.js 将 css 转换base64
var fs = require('fs');
function base64_encode(file) {
	var bitmap = fs.readFileSync(file);
	return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('C:/Users/Administrator/Desktop/qr.css')) //这里是我本地的css 文件





将生成的base 复制到href 里面

功能需求:

海报有1张背景图, 海报上的文案内容动态变化
	
分享链接做成二维码, 放在背景图的固定位置上
	
在微信环境里, 海报可长按保存或转发
整体实现流程:

按海报样式设计好html元素的页面布局, 包括背景图,文本,以及二维码图片的位置
	
使用 qrcodejs2库 将分享链接合成二维码图片,赋值到html中的二维码元素上
	
使用 html2canvas库 将html元素整体转换成一张海报
使用的第三方库:

qrcodejs2 (合成二维码)
	
html2canvas (html元素转换为图片)
下面是具体实现步骤:

一、设计html元素布局

template部分

<template>
  <!-- 海报html元素 -->
  <div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" v-show="false">
    <div>{{posterContent}}</div>
    <!-- 二维码 -->
    <div class="qrcode"><div id="qrcodeImg"></div></div>
  </div>
</template>

script部分:

<script>
  import QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas'
  export default {
    data() {
      return {
        posterContent: '', // 文案内容
        posterHtmlBg: require('../../assets/images/poster/invite_poster_bg.jpg'), // 背景图
        posterImg: '', // 最终生成的海报图片
      }
    },
  }
</script>


二、合成二维码图片

methods: {
    createQrcode(text) {
      // 生成二维码
      const qrcodeImgEl = document.getElementById('qrcodeImg')
      qrcodeImgEl.innerHTML = ''
      let qrcode = new QRCode(qrcodeImgEl, {
        width: 256,
        height: 256,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      qrcode.makeCode(text)
    },
}


三、将html元素转换成海报图片

methods: {
    createPoster() {
      // 生成海报
      const vm = this
      const domObj = document.getElementById('posterHtml')
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector('#posterHtml')
          e.style.display = 'block'
        }
      }).then(function(canvas) {
        // 在微信里,可长按保存或转发
        vm.posterImg = canvas.toDataURL('image/png')
      })
    },
}


注意: 添加html2canvas对象的onclone方法是为了 生成一个复制的虚拟组件，设置为显示，即可获取进行绘制，且虚拟组件不会显示在页面上.

福利: 本文已同步到我的个人技术网站 IT干货-sufaith 该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.

１.实验目的与要求

（1）掌握对象的定义、成员及方法的使用，遍历，构造函数。

（2）掌握内置对象的应用。

（3）掌握运用对象解决实际问题，使用并操作DOM、BOM元素。

2.内置对象----计时器

（1）任务分析

展示案例完成后的效果，对功能进行分析，主要实现展示时间及倒计时秒杀功能。

（2）代码实现

设计基本页面，并添加CSS样式。

基本实现思路：

（1）用结束时间减去现在时间就是剩余时间（计算出剩余时间的毫秒值）

（2）把剩余总的毫秒数转换为时分秒信息，并展示出来。

（1）仿淘宝关闭二维码

效果图展示



参考代码



（2）仿京东倒计时秒杀

效果图如下



参考代码