记录一下ionic canvas图片

Posted 2020-10-07 中小文

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