Canvas, problem z eskportem obrazka za pomocą javascript.

Question

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.

Comments

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

Answer 1

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