Angular 6- canvas.toDataURL('image/png') not capturing canvas background image

旧街凉风 提交于 2019-12-25 02:16:45

问题


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'));
    }

来源:https://stackoverflow.com/questions/51720673/angular-6-canvas-todataurlimage-png-not-capturing-canvas-background-image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!