function getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if(window.innerWidth) {
windowInfo.width = window.innerWidth;
} else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
}
//拿到数据后开始画背景大图 想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成img
function drawCanvasBgImg(bg) {
var vm = this;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var clientWidth = getWindowInfo().width; //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop"; //** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * clientWidth; //由于手机屏幕时retina屏,都会多倍渲染,用dpr来动态设置画布宽高,避免图片模糊
canvas.height = dpr * clientWidth * 609 / 375;
var img = new Image();
img.crossOrigin = "Anonymous"; //死坑的图片跨域 (img.crossOrigin = "Anonymous"这种写法还是不能显示base64格式图片)
img.src = "./images/post.png";
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
drawCanvasUserImg(canvas, ctx, dpr, canvas.width, canvas.height,bg);
}
}
function drawCanvasUserImg(canvas, ctx, dpr, canwidth, canheight,bg) {
var vm = this;
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = bg;
var w = canwidth / 10;
var h = canheight / 10;
img.onload = function() {
ctx.save(); // 保存当前ctx的状态
//画二维码
ctx.drawImage(img, canwidth - 7.95 * w, canheight - 1.95 * h, 2 * w, 1.3 * h); // 在刚刚裁剪的园上画图
ctx.restore(); // 还原状态
drawCanvasUserImg2(canvas, ctx, dpr, canwidth, canheight);
}
}
// 在背景图片的画布上截取一个圆然后填充入用户头像
function drawCanvasUserImg2(canvas, ctx, dpr, canwidth, canheight) {
var imgSrc = canvas.toDataURL("image/jpeg");
var img = document.getElementById('avatar');
img.setAttribute('src', imgSrc);
}
canvas画海报-解决ios不能画图问题
猜你喜欢
转载自blog.csdn.net/qq_27064559/article/details/84762712
今日推荐
周排行