上个版本街道一个需求，使用url生成一个二维码，然后和另外一张图片合成一张图拍你，
实现思路是这样的
- 使用jr-qrcode将url生成data:base64供img使用
- 然后使用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>
)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
canvas,二维码,图片,合成
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“canvas实现二维码和图片合成的示例代码”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。