}
vm.$nextTick(function () {
vm.drawCanvasBgImg();
})
})
},
// 获取页面dpr和宽度
getWindowInfo() {
var windowInfo = {};
windowInfo.dpr = window.devicePixelRatio;
if (window.innerWidth) {
windowInfo.width = window.innerWidth;
}
else {
windowInfo.width = document.body.clientWidth;
}
return windowInfo;
},
// 画活动页分享背景大图
drawCanvasBgImg () {},
// 在背景图片的画布上截取一个圆然后填充入用户头像
drawCanvasUserImg(canvas, ctx, dpr) {},
// 填写用户称呢或者用户留言
canvasFillText (canvas, ctx, dpr, circleR) {},
// 合成base64位分享图
convertCanvasToImage (canvas) {
this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓机下识别二维码无法跳转
this.$Spin.hide();
}
}
})
画图方法步骤
drawCanvasBgImg ()
drawCanvasUserImg (canvas, ctx, dpr)
canvasFillText (canvas, ctx, dpr, circleR)
convertCanvasToImage (canvas)
画活动页分享背景大图 drawCanvasBgImg ()
//拿到数据后开始画背景大图 想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成img
drawCanvasBgImg () {
var vm = this;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var clientWidth = this.getWindowInfo().width; //获取屏幕宽度用于canvas宽度自适应移动端屏幕
var dpr = this.getWindowInfo().dpr;
ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
canvas.width = dpr * clientWidth; //由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
canvas.height = dpr * clientWidth * 609 / 375;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
var img = new Image();
img.crossOrigin = '';//死坑的图片跨域 （img.crossOrigin = "Anonymous"这种写法还是不能显示base64格式图片）
img.src = "http://xxx" + this.randomNum + ".jpg";
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
vm.drawCanvasUserImg(canvas, ctx, dpr);
}
},
用户头像 drawCanvasUserImg (canvas, ctx, dpr)
// 在背景图片的画布上截取一个圆然后填充入用户头像
drawCanvasUserImg: function (canvas, ctx, dpr) {
var vm = this;
var circleR = 50 * dpr;//半径
var circleX = canvas.width / 2;//圆心X坐标
var circleY = 50 * dpr;//圆心Y坐标
var imgX = circleX - circleR;//图片X开始坐标
var imgY = circleY - circleR;//图片Y开始坐标
