import { Component, Inject, forwardRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Screenshot } from '@ionic-native/screenshot';
import { GlobalFunction } from'../../services/GlobalFuntion';
import { StorageService } from'../../services/StorageService';
// import { Global } from '../../services/Global';
import { InterfaceService } from '../../services/InterfaceService';
import { PushService } from '../../services/PushService';
/**
* Generated class for the SharingPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-sharing',
templateUrl: 'sharing.html',
})
export class SharingPage {
public canvasImage;
public imageSize : number = 3;
public userListInfo : any[];
constructor(public navCtrl: NavController,
public navParams: NavParams,
public screenshot: Screenshot,
@Inject (forwardRef (() => GlobalFunction)) private globalFunction: GlobalFunction,
@Inject (forwardRef (() => StorageService)) private storageService: StorageService,
@Inject (forwardRef (() => InterfaceService)) public interfaceService: InterfaceService,
@Inject (forwardRef (() => PushService)) public pushService: PushService) {
pushService.sharingEvent$.subscribe(data => this.update(data));
}
ionViewDidLoad() {
console.log('ionViewDidLoad SharingPage');
this.getUserInfo();
}
public update(data) {
this.userListInfo = data;
for(let z=0;z<this.userListInfo.length;z++){
this.attendanceClick(
this.userListInfo[z].userID,
this.userListInfo[z].headImgurl,
this.userListInfo[z].userName,
this.userListInfo[z].company
);
}
console.log('共多少人及格'+this.userListInfo.length);
}
public getUserInfo() {
this.interfaceService.doQueryTest();
}
//添加图片
public addIMage() {
setTimeout(()=>{
this.imageSize++;
if(this.imageSize<this.userListInfo.length){
this.attendanceClick(
this.userListInfo[this.imageSize].userID,
this.userListInfo[this.imageSize].headImgurl,
this.userListInfo[this.imageSize].userName,
this.userListInfo[this.imageSize].company
);
} else {
console.log('全部图片打印完成');
}
}, 1000);
}
//测试绘图
attendanceClick(userID,headImg,userName,company) {
let base64Image = 'assets/images/sharing.png';
//加水印
var canvas = document.createElement('canvas');
var cxt = canvas.getContext('2d');
cxt.fillStyle = 'green';
cxt.fillRect(10, 10, 100, 100);
var img = new Image();
img.src = base64Image;
img.onload = () => {
var date: string = new Date().toLocaleDateString();
var datetime: string = date;//添加日期
canvas.height = img.height;
canvas.width = img.width;
cxt.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height);
cxt.save();
cxt.font = 20 + "px Arial";
cxt.textBaseline = 'middle';//更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
cxt.textAlign = 'center';
let ftop = 715;
let fleft = 630;
cxt.fillStyle="#000";
cxt.fillText(datetime,fleft,ftop);//文本元素在画布居中方式
try {
let tempImage = new Image();
// tempImage.setAttribute('crossOrigin', 'anonymous');
// tempImage.src = headImg;
tempImage.onload = () => {
let tempImageX = 180;
let tempImageY = 310;
let tempImageW = 140;
let tempImageH = 140;
cxt.drawImage(tempImage,tempImageX,tempImageY,tempImageW,tempImageH);
// 用户名
let tempTextData = userName;
cxt.save();
cxt.font = 40 + "px Arial";
cxt.textBaseline = 'middle';
cxt.textAlign = 'left';
let tempNameX = 360;
let tempNameY = 350;
cxt.fillStyle="#000";
cxt.fillText(tempTextData,tempNameX,tempNameY);
// 公司名字
let tempCompanyData = company;
if(this.globalFunction.isNull(tempCompanyData)){
tempCompanyData = '平安人寿';
}
cxt.save();
cxt.font = 40 + "px Arial";
cxt.textBaseline = 'middle';
cxt.textAlign = 'left';
let tempCompanyX = 360;
let tempCompanyY = 420;
cxt.fillText(tempCompanyData,tempCompanyX,tempCompanyY);
this.canvasImage = canvas.toDataURL("image/jpg");
let tempSrc = this.canvasImage.substring(22);
this.interfaceService.doUpdateRankingPath(userID,tempSrc);
}
tempImage.crossOrigin="anonymous";//这是关键
tempImage.src = headImg;//顺序也很重要
} catch (error) {
console.log('出现错误'+error);
}
}
}
//测试截图
public testScreenshots() {
this.screenshot.save('jpg', 20, 'myscreenshot.jpg').then((res)=>{
this.globalFunction.showAlert('save成功'+res.filePath);
},(err)=>{
this.globalFunction.showAlert('save失败'+err);
});
}
}
按自己实际需求写的
这里来的的参考
参考链接http://www.cnblogs.com/huihuihui/p/6930434.html