1、安装html2canvas npm install --save html2canvas 官方网站 https://html2canvas.hertzen.com/ 2、在需要的组件中引入html2canvas // 导入整个模块的内容 import html2canvas from 'html2canvas'; 3、定义方法,将数据转换为canvas
let element:any = document.querySelector("#mainTable");
//要显示图片的img标签
let image:any = document.querySelector('#img');
//调用html2image方法
html2canvas(element).then( canvas=> {
this.canvasImg = canvas.toDataURL("image/png");
})
// 然后给初始化的public canvasImg: any = ""; 复制,他就是图片地址。 // 展示图片 <img src="{{canvasImg}}" />
4、将图片下载到本地,定义转换图片格式方法。 下载cordova插件
$ ionic cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos" $ npm install --save @ionic-native/photo-library 导入 import { PhotoLibrary } from '@ionic-native/photo-library'; this.photoLibrary.requestAuthorization().then(() => { this.photoLibrary.saveImage(this.canvasImg , 'NewPayQr', '').then((libraryItem)=>{ this.commonUtils.alertCommon('', this.translateObj.saveImgSucc); // alert(JSON.stringify(libraryItem)); console.log(libraryItem.id); // ID of the photo console.log(libraryItem.photoURL); // Cross-platform access to photo console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail console.log(libraryItem.fileName); console.log(libraryItem.width); console.log(libraryItem.height); console.log(libraryItem.creationDate); console.log(libraryItem.latitude); console.log(libraryItem.longitude); console.log(libraryItem.albumIds); // array of ids of appropriate AlbumItem, only of includeAlbumsData was used }); }).catch(err =>{ console.log('permissions weren\'t granted') this.commonUtils.alertCommon('',this.translateObj.saveImgFail+','+err); } );
厚积薄发,笨鸟先飞。