<!-- canvas 绘制图片 -->
<div class="translucent-gray-bg" v-show="showPop" @click="closeImgShow">
<div class="canvas-p">
<!-- 长按保存图片 利用的是手机系统自带的 -->
<div class="canvas-tip-text">长按保存图片</div>
<div class="container">
<!-- width="526" height="934" -->
<canvas class="canvas-bg" id="canvasToSave" width="526" height="934"></canvas>
<img :src="canvas2Img" id="imgShow"/>
</div>
</div>
</div>
drawCanvas(){
var screenWidth = document.body.scrollWidth;//获取屏幕宽度
let ratio = this.ratio = screenWidth / 750;
console.log('ratio',ratio);
var canvas = document.getElementById('canvasToSave');
var ctx = canvas.getContext('2d');
//此处是为了实现 多行文本超过一定宽度自动换行
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
return;
}
var context = this;
var canvas = context.canvas;
if (typeof maxWidth == 'undefined') {
maxWidth = (canvas && canvas.width) || 300;
}
if (typeof lineHeight == 'undefined') {
lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
}
// 字符分隔为数组
var arrText = text.split('');
var line = '';
for (var n = 0; n < arrText.length; n++) {
var testLine = line + arrText[n];
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = arrText[n];
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
};
ctx.scale(2,2); //结合html 中 已设置的width、height， 解决canvas 画图不清晰问题
this.canvasWidth =526 * ratio;
this.canvasHeight = 934* ratio;
this.canvasBorderRadius = 15*ratio;
//底图
let cardBgUrl = this.drawCanvasData.greetCardImageUrl;
let cardBgImg = new Image();
let that = this;
cardBgImg.onload = function(){
that._drawCircularBeadImage(ctx,
cardBgImg,
0,
0,
264,
467,
that.canvasBorderRadius);
let cardImgX = 76 * that.ratio;
let cardImgY = 578 * that.ratio;
let cardWidth = 83 * that.ratio;
let cardBorderRadius = 6 * that.ratio;
let cardImgUrl = that.drawCanvasData.cardImageUrl;
let cardImg = new Image();
cardImg.onload = function(){
that._drawCircularBeadImage(ctx,
// cardImg,
// cardImgX,
// cardImgY,
// cardWidth,
// cardWidth,
// cardBorderRadius);
cardImg,
40,
270,
50,
50,
cardBorderRadius)
}
cardImg.crossOrigin="anonymous"; //设置这个表示图片允许跨域
cardImg.src=cardImgUrl;
let companyLogoUrl = that.drawCanvasData.enterpriseImageUrl;
let originalRatio = that.drawCanvasData.enterpriseImageRatio;
let companyLogoX;
let companyLogoY;
let companyLogoWidth;
let companyLogoHeight;
if (originalRatio > (58 / 133)) {
companyLogoWidth = 58 * that.ratio / originalRatio;
companyLogoHeight = 58 * that.ratio;
companyLogoX = 324 * that.ratio + (133 * that.ratio >> 1) - (companyLogoWidth >> 1);
companyLogoY = 452 * that.ratio;
} else {
companyLogoWidth = 133 * that.ratio;
companyLogoHeight = 133 * that.ratio * originalRatio;
companyLogoX = 324 * that.ratio;
companyLogoY = 452 * that.ratio + (58 * that.ratio >> 1) - (companyLogoHeight >> 1);
}
let companyImg = new Image();
companyImg.onload = function(){
ctx.drawImage(companyImg,
// companyLogoX,
// companyLogoY,
// companyLogoWidth,
// companyLogoHeight
170,
230,
60,
30,
);
}
companyImg.crossOrigin="anonymous";
companyImg.src=companyLogoUrl;
}
cardBgImg.crossOrigin="anonymous"; //不设置 会报 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
cardBgImg.src=cardBgUrl;
//此处加了个延时器，避免图片最后画上，把文字盖住
//画文字
setTimeout(() => {
let honor = '亲爱的' + this.drawCanvasData.employeeName+":";
ctx.fillStyle = '#333333';
ctx.font = '13px serif';
ctx.fillText(honor, 50, 130);
let desc = this.drawCanvasData.greetDescText;
ctx.fillStyle = '#666666';
ctx.font = '10px serif';
ctx.wrapText(desc,50,150,180,20);
let cardName = this.drawCanvasData.cardName;
ctx.fillStyle = '#666666';
ctx.font = '10px serif';
ctx.fillText(cardName, 100, 300);
this.canvas2Img = canvas.toDataURL('image/png',1); //canvas 画完之后就把canvas 隐藏，并把图片路径赋值给页面中的img
this.firstClick = false; //避免canvas 多次绘画，图片会发生变化
canvas.style.display = 'none';
var imgShow = document.getElementById('imgShow');
imgShow.setAttribute('src', this.canvas2Img);
}, 300);
//正文
let desc = this.drawCanvasData.greetDescText;
//卡名称
let cardName = this.drawCanvasData.cardName;
let centerLine = 619 * this.ratio; // 卡头像中线位置
ctx.save();
}
//晒幸福
shareGreetingCard() {
if(this.firstClick){
_this.drawCanvas();
}else{
this.showPop = true;
}
},
网友评论