Как преобразовать картинку в base64?

Question

[Школьник.]

Нашёл вот такой код:

function getBase64Image(img) {  
    var canvas = document.createElement("canvas");  
    canvas.width = img.width;  
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");  
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");  
  
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");  
}

Но при выполнении ошибка:

VM2785:8 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at Error (native)
    at getBase64Image (<anonymous>:8:26)
    at <anonymous>:1:1
    at Object.InjectedScript._evaluateOn (<anonymous>:145:167)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:137:25)
    at Object.InjectedScript.evaluate (<anonymous>:118:14)getBase64Image @ VM2785:8(anonymous function) @ VM3093:1InjectedScript._evaluateOn @ VM3078:145InjectedScript._evaluateAndWrap @ VM3078:137InjectedScript.evaluate @ VM3078:118

Answer 1

[Школьник.]

Оказалось надо прописать crossorigin="anonymous", но этот атрибут должен быть прописан в img сразу, а не с помощью js

Answer 2

[Skrolea]

Как избавиться от ошибки «Tainted canvases may not be exported»?

Comments

[Школьник.]

я сделал так: for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
document.getElementsByTagName('img')[i].setAttribute("crossorigin", "anonymous");
}
Но все равно не работает.

Answer 3

[Ring-lang]

Если в вашей задаче не требуется писать код JavaScript, то можно использовать Notepad++

- перетащите изображение в программу:

- Edit --> Select All или (Ctrl+A)
- затем: Plugins --> MIME Tools --> Base64 Encode

- в результате код image выглядит таким:

- добавьте

<img src="data:image/jpg;base64,Тут код картинки" />

к предыдущему коду.
- результат:

<img src="data:image/jpg;base64,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" />

Comments

[Максим Люмен]

а если взять динамично ? т.е зашифровать надо изображение из db - ест у вас пример ?

[Ring-lang]

Да можно. Редко это делаю когда нужен такой подход https://habrahabr.ru/post/46466/

[Школьник.]

мне нужно получать капчу вк, пришлось заменить функцию, где создавалась картика и там добавить атрибут crossorigin="anonymous". Теперь всё работает, капча разгадывается!