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]=“qrCodeValue”>

ts部分：

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

2.合成图片

这里使用html2canvas 官网https://html2canvas.hertzen.com/
html2canvas存在资源跨域的问题(我是把本地图片转换成base64格式解决跨域https://blog.youkuaiyun.com/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]);
    }
  }