记录一下ionic canvas图片,还有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';

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