Если таблицы cols и значения являются переменными, то существует два способа:
С двойными кавычками ""
полный запрос:
$query = "INSERT INTO $table_name (id, $col1, $col2)
VALUES (NULL, '$val1', '$val2')";
Или
$query = "INSERT INTO ".$table_name." (id, ".$col1.", ".$col2.")
VALUES (NULL, '".$val1."', '".$val2."')";
С одинарными кавычками ''
:
$query = 'INSERT INTO '.$table_name.' (id, '.$col1.', '.$col2.')
VALUES (NULL, '.$val1.', '.$val2.')';
Использовать обратные тики ``
, когда имя столбца / значения похоже на зарезервированное ключевое слово MySQL.
Примечание: Если вы указываете имя столбца с именем таблицы, используйте обратные тики следующим образом:
`table_name`
. `column_name`
& lt; - Примечание: исключить .
из обратных тиков.
Примечание. Это работает только в том случае, если изображение находится в том же домене, что и страница, или имеет атрибут crossOrigin="anonymous"
, а сервер поддерживает CORS. Это также не даст вам оригинальный файл, а перекодированную версию. Если вам нужно, чтобы результат был идентичен оригиналу, см. ответ Кайидо .
Вам нужно будет создать элемент холста с правильными размерами и скопировать данные изображения с функцией drawImage
. Затем вы можете использовать функцию toDataURL
для получения данных: 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».
В дополнение к ответу Мэтью я хотел бы сказать, что image.width и image.height возвращают отображаемый размер изображения (и обрезают изображение при рисовании его на холст)
Использовать naturalWidth и naturalHeight, который использует изображение реального размера.
См. http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html# дом-IMG-naturalwidth
Эта функция принимает URL-адрес, затем возвращает изображение BASE64
function getBase64FromImageUrl(url) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
};
img.src = url;
}
Вызывает его следующим образом: getBase64FromImageUrl("images/slbltxt.png")
Приходится долго, но ни один из ответов здесь не является полностью правильным.
При рисовании на холсте переданное изображение несжатое + все предварительно умноженное. При экспорте он несжатый или повторно сжатый с другим алгоритмом и не умноженный.
Все браузеры и устройства будут иметь разные ошибки округления в этом процессе (см. Фиксация отпечатков пальцев ).
Итак, если вам нужна версия файла образа base64, они должны запросить ее снова (большую часть времени она будет поступать из кеша), но на этот раз как Blob.
Затем вы можете использовать FileReader для чтения либо как ArrayBuffer, либо как dataURL.
function toDataURL(url, callback){
var xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.responseType = 'blob';
xhr.onload = function(){
var fr = new FileReader();
fr.onload = function(){
callback(this.result);
};
fr.readAsDataURL(xhr.response); // async call
};
xhr.send();
}
toDataURL(myImage.src, function(dataURL){
result.src = dataURL;
// now just to show that passing to a canvas doesn't hold the same results
var canvas = document.createElement('canvas');
canvas.width = myImage.naturalWidth;
canvas.height = myImage.naturalHeight;
canvas.getContext('2d').drawImage(myImage, 0,0);
console.log(canvas.toDataURL() === dataURL); // false - not same data
});
<img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous">
<img id="result">
function encodeImageFileAsURL(cb) {
return function() {
var file = this.files[0];
var reader = new FileReader();
reader.onloadend = function() {
cb(reader.result);
}
reader.readAsDataURL(file);
}
}
$('#inputFileToLoad').change(encodeImageFileAsURL(function(base64Img) {
$('.output')
.find('textarea')
.val(base64Img)
.end()
.find('a')
.attr('href', base64Img)
.text(base64Img)
.end()
.find('img')
.attr('src', base64Img);
}));
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); body{ padding: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Input</h2>
<form class="input-group" id="img2b64">
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
</form>
<hr>
Более современная версия ответа kaiido с использованием fetch будет:
function toDataURL(url) {
return fetch(url)
.then((response)=> {
return response.blob();
})
.then(blob=> {
return URL.createObjectURL(blob);
});
}
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/ Using_Fetch