ionic2用canvas給照片加水印

ionic2的問題可以留言,我盡量解答

點擊按鈕調用相機拍照之后加當前時間的水印

attendanceClick() {
    console.log('aaaa');
    
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      //加水印
      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 time: string = new Date().toTimeString().substring(0,5);
        var datetime: string = date + " " + time;
        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 = 200 + "px Arial";
        cxt.textBaseline = 'middle';//更改字號后，必須重置對齊方式，否則居中麻煩。設置文本的垂直對齊方式
        cxt.textAlign = 'center';
        var tw = cxt.measureText(datetime).width;
        var ftop = canvas.height/2;
        var fleft = canvas.width/2;
        cxt.fillStyle="#ffffff";
        cxt.fillText(datetime,fleft,ftop);//文本元素在畫布居中方式
        cxt.strokeStyle = 'yellow';
        cxt.strokeText(datetime,fleft,ftop);//文字邊框

        this.dataSer.attendanceUp('xunjianA', canvas.toDataURL("image/png")).subscribe(
          data => {
            console.log('成功了');
            console.log(data);
          },
          err => {
            console.log('失敗了');
            console.log(err);
          },
          () => console.log('Query Complete')
        );
      }

      
      //console.log(base64Image);
    }, (err) => {
      // Handle error
    });
  }