生成canvas
獲取屏幕比率
有的手機屏幕實際分辨率的像素比頁面過去的尺寸像素要大，一遍是一倍或者兩倍
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; // 設置生成圖片容器的寬高
canvas.height = 1335*ratio;
ctx.clearRect(0,0,canvas.width,canvas.height); // 設置背景顏色
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 // 圓弧座標x
var cy = y + r // 圓弧座標 y
ctx.arc(cx, cy, r ,0, 2*Math.PI)
ctx.clip() // 裁剪
ctx.drawImage(img, x, y, d, d) // 畫頭像
ctx.restore() // 返回上一狀態
}
畫圓角矩形頭像方法
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() // 返回上一狀態
}
畫背景圖
var bg = new Image()
bg.crossOrigin = "*"; // 設置圖片跨域問題
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)
}
}
正方形圓角，如下圖
圓形頭像，如下圖
導出生成頭像鏈接
導出的數據爲base64的圖片鏈接，可以賦值到需要展示的圖片上，這樣就能實現圖片合成的效果了
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; // 設置生成圖片容器的寬高
canvas.height = 1335*ratio;
ctx.clearRect(0,0,canvas.width,canvas.height); // 設置背景顏色
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 // 圓弧座標x
var cy = y + r // 圓弧座標 y
ctx.arc(cx, cy, r ,0, 2*Math.PI)
ctx.clip() // 裁剪
ctx.drawImage(img, x, y, d, d) // 畫頭像
ctx.restore() // 返回上一狀態
}
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() // 返回上一狀態
}
var bg = new Image()
bg.crossOrigin = "*"; // 設置圖片跨域問題
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>