记录一下ionic canvas图片

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‘;

/**

* 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 ssssss;

constructor(public navCtrl: NavController,

public navParams: NavParams,

public screenshot: Screenshot,

@Inject (forwardRef (() => GlobalFunction)) private globalFunction: GlobalFunction,

@Inject (forwardRef (() => StorageService)) private storageService: StorageService) {

}

ionViewDidLoad() {

console.log(‘ionViewDidLoad SharingPage‘);

setTimeout(this.attendanceClick(),5000);

}

//测试绘图

attendanceClick() {

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);//文本元素在画布居中方式

let tempImage = new Image();

let tempImageSrc = this.storageService.getValue(Global.HEAD_IMG_URL);

tempImage.src = ‘assets/images/sharing.png‘;//头像

tempImage.onload = () => {

let tempImageX = 180;

let tempImageY = 310;

let tempImageW = 140;

let tempImageH = 140;

cxt.drawImage(tempImage,tempImageX,tempImageY,tempImageW,tempImageH);

let tempTextData = ‘李二狗‘;

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 = ‘平安人寿‘;

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.ssssss= canvas.toDataURL("image/jpg");

console.log(this.ssssss);

}

}

}

//测试截图

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