hollanditkzn

Я так полагаю тут суть в передаче заказа на печать, а значит нужно приемлемое качество, а значит base64 отпадает сам собой (генерация base64 для формата А4 вызовет зависание на клиенте). Манипуляций тут не так уж много потому можно просто передавать их как обычную форму а финальное изобаржение строить уже на сервере, можно даже с серевера и превью отдавать, чтобы не поддердивать 2 типа визуализации

Все из-за .HeadConsBox
Там маргины и пэдинг в процентах + width:107%; ад какой-то

*, *::before, *::after {
  outline: 1px solid red  !important;
}

Увидите границы всех элементов и сможете найти, какой вылез за пределы контейнера.

Конкретно в вашем случае проблема в margin-right: -15px у #logos.

https://www.google.ru/webhp?sourceid=chrome-instan...

ну у тебя все правильно просто тебе нужно при изменении селекта делать и вот это

ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText($("#textInput").val(), 20, 20);

иначе просто изменений в контексте канвас не происходит)
https://jsfiddle.net/4f10me0d/

https://jsfiddle.net/zte0ef52/7/
change -> input caniuse.com/#feat=input-event
functio -> function

UPD https://jsfiddle.net/3x5taa7n/1/

В примере js у Вас jquery, причем сам jquery вы не подключили. С чего бы ему работать?
Собственно на jquery так:
https://jsfiddle.net/nqavzy4n/13/

Вопрос не соответствует заголовку.
Парсить ссылку на php при помощи php.net/manual/ru/function.parse-url.php
На js Можно создать новыю ссылку <a> и потом использовать его методы https://developer.mozilla.org/en-US/docs/Web/API/H...

По поводу самого вопроса:
Идете почти правильно, но ряд шагов пропущен.

1. Нет проверки загруженного файла, может там и не картинка вовсе.
2. Отдавать tmp_name на клиент - бессмысленно. Сперва нужно сделать move_uploaded_file()
3. var_dump() не нужен. Отдавайте сам json. И к нему еще заголовки нужны, по хорошему.
4. Вместо echo "Файл не отправлен" лучше отдавать json с ошибкой. Вы же потом планируете ее через js показывать?

Пример standalone ф-ции проверяющей и сохраняющей картинку: pastebin.com/EGUN8mLK
Пример отправки json на клиент: pastebin.com/wzF0Ec7K

На счет статуса в json, псевдокод:

if ( /* успешно загружено */) {
    $response = [
      'status' => 'ok',
      'url' => $url
    ];
  } else {
    $response = ['status' => 'error'];
  }
  sendJson(response);

И на стороне клиента:

$.ajax({
  ...
  success: function (data){
  	if(data.status == 'ok') {
  		$('myPreview').attr('src', data.url)
		} else {
    	// показать ошибку
		}
  }
});

потому что у form метод get стоит по умолчанию htmlbook.ru/html/form/method

точка с запятой стоят в value
value="#5cb85c;"

https://jsfiddle.net/dkc0dw0v/

Используйте

var formData = new FormData($('form')[0]);
$.ajax({
      type: "POST",
      processData: false,
      contentType: false,
      url: "some.php",
      data:  formData 
      })
      .done(function( data ) {
                       
      });

jQuery не умеет работать с FormData, используйте обычный XHR.

$("#forma1").on("submit", function(e) {
    e.preventDefault();

    var formData = new FormData(this);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', $(this).attr('action'), true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                $("#phonePhotoModal").text(xhr.responseText);
            }
            else {
                // Обработчик ошибки
            }
        }
    };
    xhr.send(formData);
}

И добавьте в объявление формы атрибут enctype с соответствующим значением:

<form id="forma1" method="post" action="sendEmail.php" enctype="multipart/form-data">
    ...
</form>

$('#forma1').on("submit",function(){
  var formClass = $(this);
  $.ajax({
    type: "POST",
    url: "sendEmail.php",
    data: formClass.serialize(),
    cache: false,
    success: function(msg){ 
      formClass.find("#phonePhotoModal").slideDown('show').html(msg);
    }
  });
  return false;
});