Shulou(Shulou.com)06/01 Report--

This article mainly explains "if you use canvas to achieve QR code and picture synthesis in html", the content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn "if you use canvas to achieve QR code and picture synthesis in html".

The idea of realization is like this.

Use jr-qrcode to generate data:base64 from url for use by img

Then use canvas to combine the two pictures into one picture.

Problems encountered

After generating the picture, it is found that the picture is very blurred. The solution is to double the size of the canvas canvas and exaggerate the other parameters by two times.

Jr-qrcode can install this package using npm install-- save jr-qrcode

The function is to convert text to data:base64 for use by img's src.

The code is as follows:

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 ('failed to load picture')})}); 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 = 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 Ctx.fillRect (width-80, height*2-60,200,40); ctx.save () ctx.font= "28px Arial" ctx.fillStyle ='# fff' Ctx.fillText ('long press identification QR code', 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 (

)}} Thank you for your reading, the above is the content of "if you use canvas to achieve QR code and picture synthesis in html". After the study of this article, I believe you have a deeper understanding of the problem of using canvas to achieve QR code and picture synthesis in html, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.