Access control allow origin request blocked error while Convert HTML to Image using html2canvas

Asked Oct 01 '18 at 10:39

Active Oct 01 '18 at 10:47

Viewed 505 times

I have an image and some text ('p' tags) inside an html tag. Using html2canvas I can convert that html element to image. But When i use an image from server , it say Access control allow origin request blocked error. I also added allowTaint:true, useCORS:true , but nothing changed. Is there any solution for this? Or any other method ?

Here is my code

component.ts

html2canvas(document.getElementById('invoice-panel'),{allowTaint:true, useCORS:true}).then(canvas => {
  var imgData = canvas.toDataURL("image/png");
     });

html

    <ion-avatar id="invoice-panel">
      <img [src]="chosenPicture" id="custom-image"/>
      <p *ngFor="let field of arrTextFields" absolute-drag class="newText"><b>{{field.text}}</b></p>
    </ion-avatar>

edited Oct 01 '18 at 10:47

asked Oct 01 '18 at 10:39

AmiLinn

you are using image from which server. you own that server? – Aabid Oct 01 '18 at 10:41
yes. its our own server – AmiLinn Oct 01 '18 at 10:45
@Aabid , any idea? – AmiLinn Oct 01 '18 at 11:18
Its seems like you have not enable `CORS` at your server. Refer this https://stackoverflow.com/questions/7067966/how-to-allow-cors – Aabid Oct 01 '18 at 12:10
i followed everything according to https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image, but no use – AmiLinn Oct 05 '18 at 08:38

Access control allow origin request blocked error while Convert HTML to Image using html2canvas

0 Answers0