Angular 6- canvas.toDataURL('image/png') n

2019-08-25 03:12发布

问题:

Currently I am choosing one image from device gallery and using that picture as a background image for canvas. After I draw something I want to save the image. But whenever I am trying to save the image, canvas will get saved with transparent background. It's not taking background image source. Below is my code. I can see image on canvas but not capturing while saving canvas as an image.

1. HTML

<canvas no-bounce id="canvas"
      (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' (touchend)='handleEnd($event)' (click)="removeSelectedTxt()"
      [ngStyle]="{'background': 'url(' + selectedImage + ') no-repeat center center fixed', '-webkit-background-size': 'contain',
      '-moz-background-size': 'contain',
      '-o-background-size': 'contain',
      'background-size': 'contain',
      'width': '98%',
      'height': '65%'}" #canvas ></canvas>

2. ts file

save(){
      let ctx = this.canvasElement.getContext('2d');
      window.open(ctx.toDataURL('image/png'));
    }