canvas实现二维码和图片合成的示例代码


Posted in HTML / CSS onAugust 01, 2018

上个版本街道一个需求,使用url生成一个二维码,然后和另外一张图片合成一张图拍你,

实现思路是这样的

  1. 使用jr-qrcode将url生成data:base64供img使用
  2. 然后使用canvas 将两张图合成一张图片

遇到的问题

生成图片之后发现图片很模糊,解决办法是将canvas画布扩大两倍,其他参数也夸大两倍就可以了

jr-qrcode 可以使用npm install --save jr-qrcode 安装这个包

作用就是可以转化text到data:base64 供img的src 使用

代码如下

import React, { Component } from 'react'
const qrcode = require('jr-qrcode')
const loadImg = (src) => {
    const paths = Array.isArray(src) ? src : [src];
    const promise = [];
    paths.forEach((path) => {
        promise.push(new Promise((resolve, reject) => {
            let img = new Image();
            img.crossOrigin = "Anonymous";
            img.src = path;
            img.onload = () => {
                resolve(img);
            };
            img.onerror = (err) => {
                console.log('图片加载失败')
            }
        }))
    });
    return Promise.all(promise);

}
const getImageData = (url, src) => {
    const imgsrc = qrcode.getQrBase64(url)
    let canvas = document.createElement('canvas')
    const width = document.documentElement.clientWidth
    const height = document.documentElement.clientHeight
    canvas.width = width*2
    canvas.height = height*2
    let ctx = canvas.getContext("2d")
     loadImg([imgsrc, src]).then(([img1, img2]) => {
        ctx.drawImage(img2, 0, 0, width*2, height*2)
        ctx.drawImage(img1, width-80, height*2-220, 200, 160)
        ctx.fillStyle = 'rgba(0,0,0,0.3)';
        ctx.fillRect(width-80, height*2-60, 200, 40);
        ctx.save()
        ctx.font="28px Arial"
        ctx.fillStyle = '#fff';
        ctx.fillText('长按识别二维码', width-80, height*2-30, 200, 160)
        let imageURL = canvas.toDataURL("image/png")
        document.getElementById('mix_img').setAttribute('src',imageURL)
    })
}
export default class QRcode extends Component {
    render() {
        const { url , picSrc} = this.props
        getImageData(url,picSrc)
        return (
            <div>
                <img  alt='mix_img' id='mix_img'/>
            </div>
        )
    }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 #HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 #HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 #HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 #HTML / CSS
You might like
Smarty变量用法详解
2016/05/11 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
四年大学自我鉴定
2014/02/17 职场文书
带病坚持工作事迹
2014/05/03 职场文书
治超工作实施方案
2014/05/04 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
实习介绍信模板
2015/01/30 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang