精华内容
下载资源
问答
  • springboot 微信二维码样式修改 非https 不用nodejs处理0,使用场景1,显示在网页上2,修改样式3,其它方法3.1 nodejs 用到fs模块【没试过】3.2 配置https的方法解决3.3 利用js的new Blob()和new FileReader() ...

    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)- 林生祥

    🎨

    展开全文
  • 或者 用 代码 将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 o...

    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 里面

    在这里插入图片描述

    展开全文
  • 可以不依赖后台的基础上直接将你的内容生成二维码格式,供给移动端扫描 若输入框不输入内容,则默认生成 “http://www.lanrenzhijia.com”内容 可以进入js将默认值修改下即可 使用方法: 1、将CSS样式拷贝到你...
  • 二维码,条形码,网页各类打印样式控件Lodop 1.如何在页面内嵌入控件见样例一 2.如何选材打印当前页面内容见样例二 3.如何用代码生成打印页见样例三 4.如何打印设计和定位套打见样例四 5.如何控制纸张大小和连续打印见...
  • #二维码(QRcode)生成算法 C语言/C++ 源码 1. 根据输入字符串识别编码模式; 2. 根据输入字符串长度选择合适的QRcode版本; 3. 将编码转换为二进制位流表示为数据码字;...8. 在命令行输出二维码样式
  • [chrome-qrcode] 一个非常简单的chrome插件,用于将当前页面的URL地址转换成一个二维码。使用效果如下图所示: 意见反馈及主页: : 一,安装方法 Chrome插件商店下载地址: : ,请勿...选项配置页面,自定义二维码样式
  • Vue生成分享海报(含二维码)

    千次阅读 2019-03-28 17:45:16
    按海报样式设计好html元素的页面布局, 包括背景图,文本,以及二维码图片的位置 使用 qrcodejs2库 将分享链接合成二维码图片,赋值到html中的二维码元素上 使用 html2canvas库 将html元素整体转换成一张海...

    功能需求:

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

    整体实现流程:

    1. 按海报样式设计好html元素的页面布局, 包括背景图,文本,以及二维码图片的位置
    2. 使用 qrcodejs2库 将分享链接合成二维码图片,赋值到html中的二维码元素上
    3. 使用 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.实验目的与要求 (1)掌握对象的定义、成员及方法的使用,遍历,构造函数。 (2)掌握内置对象的应用。...(2)把剩余总的毫秒数转换为时分秒信息,并展示出来。 (1)仿淘宝关闭二维码 效果图展示

    1.实验目的与要求
    (1)掌握对象的定义、成员及方法的使用,遍历,构造函数。
    (2)掌握内置对象的应用。
    (3)掌握运用对象解决实际问题,使用并操作DOM、BOM元素。
    2.内置对象----计时器
    (1)任务分析
    展示案例完成后的效果,对功能进行分析,主要实现展示时间及倒计时秒杀功能。
    (2)代码实现
    设计基本页面,并添加CSS样式。
    基本实现思路:
    (1)用结束时间减去现在时间就是剩余时间(计算出剩余时间的毫秒值)
    (2)把剩余总的毫秒数转换为时分秒信息,并展示出来。
    (1)仿淘宝关闭二维码
    效果图展示
    在这里插入图片描述
    参考代码
    在这里插入图片描述
    (2)仿京东倒计时秒杀
    效果图如下
    在这里插入图片描述
    参考代码

    在这里插入图片描述

    展开全文
  • 表格数据汇总、全自动检索录入、数据采集大师、批量改图片大小、批量图片导入、批量图片导出、批量导图入批注、图片查询、截长图与分页截图、批量图片排序大师、批量图片格式转换、批量文字水印与Logo水印、批量取...
  • 批量二维码识别、批量二维码生成、表格数据汇总、全自动检索录入、数据采集大师、批量改图片大小、批量图片导入、批量图片导出、批量导图入批注、图片查询、批量图片排序大师、批量图片格式转换、批量文字水印与Logo...
  • MVC:基于spring mvc注解,Rest样式Controller。异常统一管理。 预定:Spring + quartz,可以查询,修改周期,暂停,删除,添加,立即执行,查询执行记录等。 基于会话的国际化提示信息,职责链模式的本地语言拦截...
  • 表格数据汇总、全自动检索录入、数据采集大师、批量改图片大小、批量图片导入、批量图片导出、批量导图入批注、图片查询、截长图与分页截图、批量图片排序大师、批量图片格式转换、批量文字水印与Logo水印、批量取...
  • vue前端开发微信支付和支付宝支付

    千次阅读 2020-05-17 22:34:20
    微信支付后台程序员会给你返一个地址,首先我们需要安装qrcodejs2将地址转换二维码,需要先npm install qrcodejs2 然后需要一个div来存放这个微信二维码,宽高样式各位自己可以去css里写,我在这里还加了一个...
  • PHP制作分享图片

    2019-02-18 16:04:22
    处理图片的类:上传、缩略图、二维码... 需要控制器来查询出这些数据,然后调用模板,并获取其中的流(这个流的数据相当于访问他的数据),然后把这个流生成PDF,然后转换成PNG  二维码也是流的展示方法,然后...
  • vue+node.js实现扫码

    2020-12-09 23:20:23
    vue + node.js实现扫码实现理念使用npm包一览生成二维码得地址布局样式打开摄像头截取图片并上传后端 实现理念 2000毫秒截取一张摄像头当前录到数据转换base64给服务器发过去 服务器通过解码base64后保存文件到本地...
  • xhtmlrenderer + iText-HTML转PDF

    千次阅读 2020-03-16 16:24:35
    文章目录xhtmlrenderer...xhtmlrendere+itext2.0.8 将html转成pdf,带样式、图片(也支持二维码、条形码)等 主要步骤 生成html(css样式直接放在style中) html转换pdf方法 数据返回给前端 详细过程 html模板: p...
  • py-01-YongHe

    2018-11-13 18:17:20
    day02:HTML网页制作+CSS样式表+二维码 day03:动态技术J2ee Servlet+JSP day04:mysql数据库+sqlyog的使用 day05: PowerDesigner的使用+Jdbc day06:日期格式的转换和统一 day07:项目开发设计思路 Database:永和...
  • 移动端标签宽度为1px不显示解决

    千次阅读 2018-08-27 17:11:31
    因为转换的rem太小了,宽度为1px在有些机型就显示不出来。 将宽度为1px 写在内联样式中,就会显示出来了。       左边分享一个公众号,写一些散文和影评等,右边的是博主自己的二维码,欢迎一起讨论。   ...
  • vue H5页面实现海报功能demo

    千次阅读 2019-11-20 18:21:03
    demo展示地址:(扫描图片二维码即可体验) ...<template>...-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片,然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src--> ...
  • Gbbs v3.2.rar

    2019-08-29 13:57:17
    GBBS属于微论坛、微贴吧,...8、多**编辑器自动识别转换 9、后台话题自动按时间排序 更新涉及文件: index.asp js_read.asp bbsview.asp style.css bbslist.asp kill_keyword.asp dbconn.asp conn.asp bbs_admin.asp
  • 支持二维码定制绘制信息样式 三角形 矩形 五边形 (五角星待支持) 六边形 八边形 圆 自定义图片 前置图支持 动态二维码生成支持 二维码信息解析 查看更多二维码详情 最新版本2.5,详情查看 迭代日志 给出一...
  • 图片操作工具类(ToolPicture.java),生成二维码、验证码、灰度、合成、圆角、水印等操作 读取本地资源工具类(ToolResource.java),反射本地资源文件API,避免依赖R文件,方便jar形式发布 Android单位转换工具类...
  • 给自己网站这个链接生成一个二维码 需要将收款码转换为收款链接 如果自己没有网站,可以联系我QQ:1304547047 axel-2.4.tar.gz linux环境下多线程下载工具https://blog.mydns.vip/1280.html tcping-windows.rar ...
  • 图片操作工具类(ToolPicture.java),生成二维码、验证码、灰度、合成、圆角、水印等操作 读取本地资源工具类(ToolResource.java),反射本地资源文件API,避免依赖R文件,方便jar形式发布 Android单位转换工具类...
  • Zxing二维码库 百度地图定位SDK 谷歌依赖注入库RoboGuice WebService调用库ksoap2 XML解析XStream 动画开源库nineoldandroids 表单验证库android-validation-komensky 更多优秀开源库等待集成... 已封装工具类: ...
  • 二维码 将选区中的字符生成二难码。 查日历 查询公历和农历日期。 转换式 批量转换文档格式。 提取XX前的值 根据指定的位置提取其前方的数值,并保存在剪贴板中,您可以将它复制WORD中或者Excel中去。 提取XX后的值 ...
  • 采用字典补码查漏纠错技术实现台湾繁体系统中繁简转换与GB2BIG5转换准确率达100%,达到微软同效功能。每款功能千锤百炼。更内置了比Vlookup()函数更强大且好用的VlookupIn()函数。能对VBA宏程式能实现撤销与还原操作...
  • 3、交易挖矿、持币分红页面科学计数转换为数字; 4、持币分红页面分页功能; 5、法币交易我的订单增加联系电话; 2018.7.17 1、修复提币页面提现记录分页BUG并优化筛选功能; 2、首页特点内容优化; 2018.7.16 1、币...
  • Zoomla!逐浪CMS 3.9.6.rar

    2019-05-24 16:02:16
    图片转换模块(需要额外载入第三方支持类库);36.扩展:重写了微信--菜单配置功能,支持自定义填写URL|关联节点|关联内容|关联逐浪后台调查问卷,更加敏捷便利;37.优化:会员中心修改密码等处的样式,摒弃表格用纯div...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

二维码样式转换