記錄一下ionic canvas圖片
阿新 • • 發佈：2017-09-20
see div canvas 文本 更改 參考 cPage nts pri
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
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
記錄一下ionic canvas圖片