生成canvas
獲取屏幕比率
有的手機(jī)屏幕實(shí)際分辨率的像素比頁(yè)面過(guò)去的尺寸像素要大，一遍是一倍或者兩倍
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
初始化canvas
var canvas = document.createElement('canvas')//畫布
var ctx = canvas.getContext("2d");
var ratio = getPixelRatio(ctx); // 獲取屏幕比率
canvas.width = 750*ratio; // 設(shè)置生成圖片容器的寬高
canvas.height = 1335*ratio;
ctx.clearRect(0,0,canvas.width,canvas.height); // 設(shè)置背景顏色
ctx.fillStyle = '#000000';
ctx.fillRect(0,0,canvas.width, canvas.height);
畫圓形頭像方法
function drawRound (ctx,r,x,y,img) {
ctx.save() // 保存之前的
var r = r // 半徑*屏幕分辨率比例
var d = 2*r // 直徑
var cx = x + r // 圓弧坐標(biāo)x
var cy = y + r // 圓弧坐標(biāo) y
ctx.arc(cx, cy, r ,0, 2*Math.PI)
ctx.clip() // 裁剪
ctx.drawImage(img, x, y, d, d) // 畫頭像
ctx.restore() // 返回上一狀態(tài)
}
畫圓角矩形頭像方法
function drawRoundRect (ctx,r,x,y,w,h,img) {
ctx.save()
if (w < 2 * r) r = w / 2
if (h < 2 * r) r = h / 2
ctx.beginPath()
ctx.moveTo(x+r, y)
ctx.arcTo(x+w, y, x+w, y+h, r)
ctx.arcTo(x+w, y+h, x, y+h, r)
ctx.arcTo(x, y+h, x, y, r)
ctx.arcTo(x, y, x+w, y, r)
ctx.closePath();
ctx.clip()
ctx.drawImage(img, x, y, w, h)
ctx.restore() // 返回上一狀態(tài)
}
畫背景圖
var bg = new Image()
bg.crossOrigin = "*"; // 設(shè)置圖片跨域問(wèn)題
bg.src = 'img/bg.jpg'
bg.onload = function() {
ctx.drawImage(bg, 0, 0, bg.width, bg.height, 0, 0, canvas.width, canvas.height);
// 畫完背景圖后，畫頭像
var head = new Image()
head.crossOrigin = "*"
head.src = 'img/head.jpg'
head.onload = function() {
//畫頭像,這里畫矩形圖
var r = 10*ratio
var x = 325*ratio
var y = 500*ratio
var w = 100*ratio
var h = 100*ratio
drawRoundRect(ctx,r,x,y,w,h,head)
}
}
正方形圓角，如下圖
image.png
圓形頭像，如下圖
image.png
導(dǎo)出生成頭像鏈接
導(dǎo)出的數(shù)據(jù)為base64的圖片鏈接，可以賦值到需要展示的圖片上，這樣就能實(shí)現(xiàn)圖片合成的效果了
var imgData = canvas.toDataURL()
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
width: 375px;
height: 667px;
}
.container img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<img id="result" src="" alt="">
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script>
$(function(){
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
}
var canvas = document.createElement('canvas')//畫布
var ctx = canvas.getContext("2d");
var ratio = getPixelRatio(ctx); // 獲取屏幕比率
canvas.width = 750*ratio; // 設(shè)置生成圖片容器的寬高
canvas.height = 1335*ratio;
ctx.clearRect(0,0,canvas.width,canvas.height); // 設(shè)置背景顏色
ctx.fillStyle = '#000000';
ctx.fillRect(0,0,canvas.width, canvas.height);
function drawRound (ctx,r,x,y,img) {
ctx.save() // 保存之前的
var r = r // 半徑*屏幕分辨率比例
var d = 2*r // 直徑
var cx = x + r // 圓弧坐標(biāo)x
var cy = y + r // 圓弧坐標(biāo) y
ctx.arc(cx, cy, r ,0, 2*Math.PI)
ctx.clip() // 裁剪
ctx.drawImage(img, x, y, d, d) // 畫頭像
ctx.restore() // 返回上一狀態(tài)
}
function drawRoundRect (ctx,r,x,y,w,h,img) {
ctx.save()
if (w < 2 * r) r = w / 2
if (h < 2 * r) r = h / 2
ctx.beginPath()
ctx.moveTo(x+r, y)
ctx.arcTo(x+w, y, x+w, y+h, r)
ctx.arcTo(x+w, y+h, x, y+h, r)
ctx.arcTo(x, y+h, x, y, r)
ctx.arcTo(x, y, x+w, y, r)
ctx.closePath();
ctx.clip()
ctx.drawImage(img, x, y, w, h)
ctx.restore() // 返回上一狀態(tài)
}
var bg = new Image()
bg.crossOrigin = "*"; // 設(shè)置圖片跨域問(wèn)題
bg.src = 'img/J-bg.jpg'
bg.onload = function() {
ctx.drawImage(bg, 0, 0, bg.width, bg.height, 0, 0, canvas.width, canvas.height);
// 畫完背景圖后，畫頭像
var head = new Image()
head.crossOrigin = "*"
head.src = 'img/head.jpg'
head.onload = function() {
//畫頭像,這里畫矩形圖
var r = 100*ratio
var x = 325*ratio
var y = 500*ratio
var w = 100*ratio
var h = 100*ratio
drawRoundRect(ctx,r,x,y,w,h,head)
var imgData = canvas.toDataURL()
$('#result').attr('src', imgData)
}
}
})
</script>
</body>
</html>
