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心形加载的动画源码的实现
Mar 09 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
php中大括号作用介绍
2012/03/22 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jquery等待效果示例
2014/05/01 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python面向对象法实现图书管理系统
2019/04/19 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
pandas如何处理缺失值
2019/07/31 Python
django框架创建应用操作示例
2019/09/26 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
转预备党员政审材料
2014/02/06 职场文书
怎么写好自荐书
2014/03/02 职场文书
租车协议书范本
2014/04/22 职场文书
抗震救灾标语
2014/06/26 职场文书
圣诞晚会主持词
2015/07/01 职场文书
公司食堂管理制度
2015/08/05 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python