canvas PIP

Recent work encountered a demand to achieve a custom two-dimensional code

1. The background is a self-defined picture
2. Two-dimensional code display center
3. Long press to identify the micro-letter

Like the following

---

After some investigation the information and thinking, are summarized as follows

drawImage

canvas can speak this way a picture or video on the canvas, drawImage function has three function prototypes

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

The first parameter image can HTMLImageElement, HTMLCanvasElement HTMLVideoElement or as a parameter. dx and dy are the coordinate values ​​of image positioned in the canvas; DW and dh is the image to be subsequently drawn region (offset relative dx and dy coordinates) of the width and height values ​​in the canvas; SX and sy is the starting image to be drawn start position, sw, sh is the image area to be drawn (relative image shift amount sx and sy coordinates) of the width and height values

Sentence is sx, sy is the starting cut on the original coordinate points, sh, sw is the width of high shear.
And dx, dy is put into the position of FIG shear canvas, dh, dw canvas is placed in the aspect.

Having a concept, now the practical operation

A demand

First put a label on the canvas html

<canvas id="myCanvas" class="my-canvas"></canvas>

Then create a context object through the canvas API

var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");

The background image is drawn in

var img = document.getElementById ("bgc");
ctx.drawImage (
img, //图片资源
0, 0, //截取图片的坐标点
img.width, img.height, //截取图片的宽高,这里是原宽高
0, 0, //放入画布中的坐标点
ctx.canvas.width, ctx.canvas.height //截取的图片放入画布的宽高 = 画布的宽高
);

The last two parameters above ctx.canvas.width, ctx.canvas.heighteffect is to make the interception of the picture stretched canvas size, thus filling the entire canvas.
Well, this, we have completed the first demand.

Demand II

Mr. into a two-dimensional code

var code = $ ('#qrcode').qrcode ({
  text: "www.baidu.com",
  render: "canvas",
  width: 120,
  height: 120,
  typeNumber: -1,
  background: '#FFFFFF',
  foreground: '#000000'
});

Next to how the two-dimensional code into the canvas center of it?
Let's think about is how to achieve absolute positioning of the center

<div class="father">
  <div class="sone"></div>
</div>

.father{
  height:100px:
  width:100px;
  border:1px solid red;
}
.son{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Can be drawn, first son move down the right width and height of 50% father. Own son then left to move up their own 50% of the width and height can be achieved in the middle.

Similarly, canvas is the center of the two-dimensional code may be implemented as

ctx.drawImage (
qrcode, 
0, 0, 
qrcode.width, //二维码宽度
qrcode.height, //二维码高度
Math.abs (ctx.canvas.width - ctx.canvas.width * 0.5) * 0.5, //放入画布中的起始x坐标
Math.abs (ctx.canvas.height - ctx.canvas.height * 0.5) * 0.5, //放入画布中的起始y坐标 
ctx.canvas.width * 0.5, //放入画布中的宽
ctx.canvas.height * 0.5 //放入画布中的高
);

We use the same method of calculation can get into the canvas coordinate points, so you can make a two-dimensional code center

Long press to identify the micro-letter

canvas image obtained in the micro letter press can not be identified, as long as it changed img