canvas 画圆角矩形头像合成图片
2019-04-30 本文已影响0人
aimee66
生成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)
}
}
正方形圆角，如下图
image.png
圆形头像，如下图
image.png
导出生成头像链接
导出的数据为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>
