ionic3——图片通过canvas标注并保存手机本地

额，
1、html

<canvas id="Html2Pdf"> </canvas>

2、事件触发，通过canvas引入图片，并标注。；

var img = new Image ;
   img.src = 'assets/imgs/pdf/gp.jpg';
   img.onload = ()=>{
     var canvas:any = document.getElementById('Html2Pdf');
     canvas.width = 2494; //定义canvas 宽度 * 缩放，这里是图片的宽高
     canvas.height = 3544; //定义canvas高度 *缩放
     canvas.style.width = 2494 + "px";
     canvas.style.height = 3544 + "px";
     var ctx = canvas.getContext("2d");
     ctx.drawImage(img,0,0);
     ctx.font = "40px 微软雅黑";
     ctx.fillStyle = "rgba(0,0,0,1)";
     ctx.fillText('1111111111111111',100,100);
}

3、如果文字需要角度的话：

        ctx.save();
        ctx.beginPath();
        this.rotateContext(ctx, 100, 200, 90);
        ctx.fillText('111111111',100,200); //选择位置
        ctx.restore();

具体参考：https://www.cnblogs.com/fangsmile/p/9947823.html
4、获取图片base64；

canvas.toDataURL("image/JPEG");

5、base64转图片上传，两种方式；
一、https://ionicframework.com/docs/v3/native/base64-to-gallery/

但是我遇到了权限问题，无法保存。
二、https://github.com/apache/cordova-plugin-file

 var base64;
  var dataTypeWithB64 = 'data:image/jpeg;base64,' + base64; 

  public writeFile(dataTypeWithB64: any, base64:any,) {  
  var fileName ="file Name";
  var rootPath = "app path"

  var contentType = this.getContentType(dataTypeWithB64); 
  // var content
  var DataBlob = this.base64toBlob(base64, contentType);  
  // here iam mentioned this line this.file.externalRootDirectory is a native pre-defined file path storage. You can change a file path whatever pre-defined method.  
  var filePath = this.file.externalRootDirectory + rootPath;
  console.log(filePath , " 1");
  console.log(fileName , " 2");
  console.log(DataBlob , " 3");
  console.log(contentType , " 4");

  this.file.writeFile(filePath, fileName, DataBlob, contentType).then((success) => {  
      console.log("File Writed Successfully", success);  
  }).catch((err) => {  
      console.log("Error Occured While Writing File", err);  
  })  
}  
//here is the method is used to get content type of an bas64 data  
public getContentType(base64Data: any) {  
  let block = base64Data.split(";");  
  let contentType = block[0].split(":")[1];  
  return contentType;  
}  
//here is the method is used to convert base64 data to blob data  
base64toBlob(b64Data, contentType) {  
  contentType = contentType || '';  
  let sliceSize = 512;

  let byteCharacters = atob(b64Data);  
  let byteArrays = [];  
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {  
      let slice = byteCharacters.slice(offset, offset + sliceSize);  
      let byteNumbers = new Array(slice.length);  
      for (let i = 0; i < slice.length; i++) {  
          byteNumbers[i] = slice.charCodeAt(i);  
      }  
      var byteArray = new Uint8Array(byteNumbers);  
      byteArrays.push(byteArray);  
  }  
  let blob = new Blob(byteArrays, {  
      type: contentType  
  });  
  // console.log(blob) 
  return blob; 
}

原地址：https://stackoverflow.com/questions/58343998/decode-base64-file-to-directory-in-ionic-3-app?r=SearchResults