ionic3&angular 一张图片和二维码合成一张图片并保存

1.(ionic3)生成一个二维码

导入插件(ionic3需要在app.module引用,ionic4只在对象module引用就ok)

npm install angular2-qrcode --save

app.module中引入插件模块

//第三方插件模块
import { QRCodeModule } from 'angular2-qrcode';	

html部分：

<qr-code [value]="qrCodeValu">

ts部分：

export class MyPostPage {
  //二维码变量
  qrCodeValue:String;
  constructor() {
	  //初始化二维码
	  this.qrCodeValue="生成二维码内容";
  }
}

2.合成图片

这里使用html2canvas 官网https://html2canvas.hertzen.com/
html2canvas存在资源跨域的问题(我是把本地图片转换成base64格式解决跨域https://blog.csdn.net/weixin_42869574/article/details/87169479)

1.在index.html引用

<script src="assets/js/html2canvas.min.js"></script>

2.声明html2canvas;

import {ActionSheetController} from 'ionic-angular';
import {Base64ToGallery, Base64ToGalleryOptions} from '@ionic-				native/base64-to-gallery';

declare var html2canvas;
export class MyPostPage {
  //二维码变量
  qrCodeValue:String;
  constructor(public actionSheetCtrl:ActionSheetController) {
    //初始化二维码
    this.qrCodeValue="生成二维码内容";
  }
}

3.合成图片

html部分:

<div class="vCode">
  <img src="xxxxx" id="img">
  <qr-code  [value]="qrCodeValue"></qr-code>
</div>

ts部分:

html2canvas(){
var that=this;
html2canvas(document.querySelector('.vCode'),{useCORS:true}).then(function (canvas) {
  //获取年月日作为文件名
  var timers=new Date();
  var fullYear=timers.getFullYear();
  var month=timers.getMonth()+1;
  var date=timers.getDate();
  var randoms=Math.random()+'';
  //年月日加上随机数
  var numberFileName=fullYear+''+month+date+randoms.slice(3,10);
  var imgData=canvas.toDataURL();
  that.presentActionSheet(imgData);
})
}

// 弹出选择框
presentActionSheet(imgUrl:string) {
let actionSheet = this.actionSheetCtrl.create({
  title: '提示',
  buttons: [
    {
      text: '保存到相册',
      role: 'destructive',
      handler: () => {
        // 保存图片
        this.saveImg(imgUrl);
      }
    },
    {
      text: '取消',
      role: 'cancel',
      handler: () => {}
    }
  ]
});
actionSheet.present();
}

3.保存图片(base64格式)

引用插件Base64ToGallery

ionic cordova plugin add cordova-base64-to-gallery
npm install @ionic-native/base64-to-gallery

app.module中引入插件模块

import { Base64ToGallery } from ‘@ionic-native/base64-to-gallery’;

ts部分:
导入查看权限依赖

import{ AndroidPermissions }from’@ionic-native/android-permissions’;

saveImg(base64Data) {
if (!this.hasWriteAccess) {
  this.checkPermissions();
}
let options: Base64ToGalleryOptions = {
  prefix: '_img',
  mediaScanner: true
};
this.base64ToGallery.base64ToGallery(base64Data, options).then(
  res => {this.app.alert("","保存成功")},
  err => {}
);
 }
//检查权限
checkPermissions() {
this.androidPermissions
  .checkPermission(this.androidPermissions
    .PERMISSION.WRITE_EXTERNAL_STORAGE)
  .then((result) => {
    console.log('Has permission?',result.hasPermission);
    this.hasWriteAccess = result.hasPermission;
  },(err) => {
    this.androidPermissions
      .requestPermission(this.androidPermissions
        .PERMISSION.WRITE_EXTERNAL_STORAGE);
  });
 if (!this.hasWriteAccess) {
  this.androidPermissions
    .requestPermissions([this.androidPermissions
      .PERMISSION.WRITE_EXTERNAL_STORAGE]);
 }
}