• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Canvas, problem z eskportem obrazka za pomocą javascript.

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
241 wizyt
pytanie zadane 5 lutego 2022 w JavaScript przez Michał Drożdżyński Początkujący (370 p.)

W elemencie canvas, za pomocą poniższego kodu rysuje obrazki.

    let canvas = document.getElementById('canvas');  
        
    let ctx = canvas.getContext('2d')
    let width = canvas.width
    let height = canvas.height
    ctx.clearRect(0, 0, width, height)
    ctx.canvas.width  = width
    ctx.canvas.height = height

    ....

    let image = new Image
    //image.crossOrigin = 'anonymous'
    image.src = url
    ctx.drawImage(image, x, y)

Wszystko działa dobrze, do momentu aż chce eksportować powstałą w ten sposób grafikę. Próbuję to zrobić w taki sposób:

    let canvas = document.getElementById('canvas')
    var link = document.createElement('a')
    let imgUrl = canvas.toDataURL()
    link.download = 'graphics.jpg'
    link.href = imgUrl
    link.click()

Otrzymuje wtedy w konsoli taki błąd: 

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Szukając rozwiązania tego problemu natrafiłem na informację że przed dodaniem grafiki do canvas trzeba dodać linikę którą u góry zakomentowałem, a mianowicie: 

image.crossOrigin = 'anonymous'

Problem polega na tym, że wtedy te grafiki się nie wczytują, ponieważ wtedy jest to blokowane przez cors policy:

Access to image at ... from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Grafiki są pobierane z backendu napisanego w laravelu. W jaki sposób można wyeksportować za pomocą js dane z canvas, bez konieczności zmiany niczego na backendzie? Jeśli to jest nie możliwe, to w jaki sposób zmienić cors policy w laravelu, aby nie blokowało to pobierania grafik z folderu storage.

komentarz 6 lutego 2022 przez VBService Ekspert (255,900 p.)
edycja 6 lutego 2022 przez VBService

Sprawdź to: 

Tainted canvases may not be exported

lub

You can use the reimg library to do this really easily.

 

Converting the canvas to an img:
 ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng() 

 

And downloading this image for the user can be done like this:  
 ReImg.fromCanvas(document.getElementById('canvas')).downloadPng() 

 

About giving the file a custom name, if you look into the code of the library (which is very short and simple to understand) you'll find that you can change the name.

lub opis z końca tego wpisu

Export canvas as image with JavaScript

1 odpowiedź

+1 głos
odpowiedź 6 lutego 2022 przez rafal.budzis Szeryf (85,380 p.)
Blokada wynika z tego że nie wiadomo czy masz prawo wykorzystywać grafiki z innej domeny. Gdy wrzucisz stronę na tą samą domenę co backend problem się rozwiąże :)

Jeśli chcesz aby działało na localhost to BE musi zwrócić nagłówek
access-control-allow-origin: http://localhost

Podobne pytania

0 głosów
1 odpowiedź 163 wizyt
pytanie zadane 12 lipca 2018 w JavaScript przez Gapcio Nowicjusz (120 p.)

93,110 zapytań

142,091 odpowiedzi

321,614 komentarzy

62,452 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...