QRcode logo

[abeinoo]

How Can I branded the qrcode , put image or logo on qrcode

[AyrA]

You have to do it yourself. It's not too difficult:

1. Load the generated PNG into a canvas
2. Draw your image into the exact center with a width and height of at most 1/3 of the QR code size

[babydada]

Hi! I want to use it in WeChat small program;and i want to Setting the style of the icon，Is there any good way to do it，

[Usamaliaquat123]

@AyrA did you have any example to do this .... Thanks

[AyrA]

Something similar to this:

function imgQR(qrCanvas, centerImage, factor) {
	var h = qrCanvas.height;

	//Center size
	var cs = h * factor;
	//Center offset
	var co = (h - cs) / 2;

	var ctx = qrCanvas.getContext("2d");
	ctx.drawImage(centerImage, 0, 0, centerImage.width, centerImage.height, co, co, cs, cs);
}

Note: this is untested code. It might need some tweaking. Supply the canvas with the qr code already drawn, the image to draw, and the scaling factor. I would start with something small like 0.25

[hickiy]

this a small example, hope it can help to you

function imgQR(qrCanvas, centerImage, factor) {
    var h = qrCanvas.height;
    //Center size
    var cs = h * factor;
    //Center offset
    var co = (h - cs) / 2;
    var ctx = qrCanvas.getContext("2d");
    ctx.drawImage(centerImage, 0, 0, centerImage.width, centerImage.height, co, co, cs, cs);
  }
  const icon = new Image();
  icon.onload = function () {
    var qrcode = new QRCode(document.getElementById("qrcode"), {
      text: "https://docs.apipost.cn/preview/c1965f884871c5e8/022649a12cdf1ad7",
      width: 200,
      height: 200,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H
    });
    imgQR(qrcode._oDrawing._elCanvas, this, 0.2)
  }
  icon.src = './success.png';