Как я могу создать код изображения? [Дубликат]

Если таблицы 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; - Примечание: исключить . из обратных тиков.

301
задан Volker E. 30 April 2014 в 18:05
поделиться

6 ответов

Примечание. Это работает только в том случае, если изображение находится в том же домене, что и страница, или имеет атрибут 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».

381
ответ дан Community 26 August 2018 в 01:21
поделиться

В дополнение к ответу Мэтью я хотел бы сказать, что image.width и image.height возвращают отображаемый размер изображения (и обрезают изображение при рисовании его на холст)

Использовать naturalWidth и naturalHeight, который использует изображение реального размера.

См. http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html# дом-IMG-naturalwidth

22
ответ дан cube45 26 August 2018 в 01:21
поделиться

Эта функция принимает 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")

69
ответ дан Ionică Bizău 26 August 2018 в 01:21
поделиться

Приходится долго, но ни один из ответов здесь не является полностью правильным.

При рисовании на холсте переданное изображение несжатое + все предварительно умноженное. При экспорте он несжатый или повторно сжатый с другим алгоритмом и не умноженный.

Все браузеры и устройства будут иметь разные ошибки округления в этом процессе (см. Фиксация отпечатков пальцев ).

Итак, если вам нужна версия файла образа 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">

30
ответ дан lorefnon 26 August 2018 в 01:21
поделиться

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>
Вот пример рабочей скрипты: - upload & amp; получить данные изображения

0
ответ дан Parth Raval 26 August 2018 в 01:21
поделиться

Более современная версия ответа 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

8
ответ дан Zaptree 26 August 2018 в 01:21
поделиться
Другие вопросы по тегам:

Похожие вопросы: