Получить URL данных изображения в JavaScript?
Вы можете сначала проверить, существует ли элемент
let elem = document.querySelector(".book-now");
if (elem !== null) {
elem.addEventListener("click", e => {
//rest of the code
})
}
2 ответа
Примечание: Это работает, только если изображение находится из того же домена, что и страница, или имеет атрибут crossOrigin = "anonymous" и сервер поддерживает CORS . Он также не даст вам исходный файл, а даст вам перекодированную версию. Если вам нужно, чтобы результат был идентичен оригиналу, см. ответ Кайидо .
Вам нужно будет создать элемент холста с правильными размерами и скопировать данные изображения с помощью drawImage функция. Затем вы можете использовать функцию toDataURL , чтобы получить data: url, который имеет изображение в кодировке base-64. Обратите внимание, что изображение должно быть полностью загружено, иначе вы просто получите пустое (черное, прозрачное) изображение.
Это будет примерно так. Я никогда не писал скрипта Greasemonkey, поэтому вам может потребоваться настроить код для работы в этой среде.
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Получение изображения в формате JPEG не работает в более старых версиях (около 3.5) Firefox, поэтому, если вы хотите поддерживать это, вам необходимо проверьте совместимость. Если кодировка не поддерживается, по умолчанию используется «image / png».
заточка / шиммирует / обман
, Если Ваше изображение (изображения) уже загружается (или не), этот "инструмент" может пригодиться:
Object.defineProperty
(
HTMLImageElement.prototype,'toDataURL',
{enumerable:false,configurable:false,writable:false,value:function(m,q)
{
let c=document.createElement('canvas');
c.width=this.naturalWidth; c.height=this.naturalHeight;
c.getContext('2d').drawImage(this,0,0); return c.toDataURL(m,q);
}}
);
.. но почему?
Это имеет преимущество использования "уже загруженных" данных изображения, таким образом, никакой дополнительный запрос в необходимом. Aditionally это позволяет конечному пользователю (программист как Вы) решают CORS и/или mime-type и quality - ИЛИ можно не учесть эти аргументы/параметры, как описано в спецификация MDN здесь .
, Если у Вас есть этот загруженный JS (до того, когда он необходим), затем преобразовывая в dataURL так же просто как:
примеры
HTML <img src="/yo.jpg" onload="console.log(this.toDataURL('image/jpeg'))">
JS console.log(document.getElementById("someImgID").toDataURL());
GPU, берущий отпечатки пальцев
, Если Вы обеспокоены "точностью" битов тогда, что можно изменить этот инструмент для удовлетворения потребностям в соответствии с ответом @Kaiido.