Поместить содержимое с формы непосредственно на изображение

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

Я создал форму с полями ввода и формой и теперь должен найти скрипт, который просто вставляет мой ввод на изображение.

См изображение ниже для справки и моя форма для информации:

form

источник

2017-02-22 Owen Dawson

Удалённый тег из названия –

Вы можете сделать все это полностью на стороне клиента, используя холст и немного JS.

Во-первых, получить ваши холст и контекстные ссылки:
```
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
```

Используйте drawImage нарисовать шаблон изображение в холст:

var imgSource = new Image(); 
imgSource.onload = function() { 
    ctx.drawImage(imgSource, 0, 0); 
}; 

//idealy the source is data uri - otherwise from the same domain, 
//or you'll encounter security errors; 
imgSource.src = 'your template image';

Далее, используйте fillText, чтобы добавить свой текст в нужном месте на холсте:
```
ctx.font = '40px Arial'; 
ctx.fillStyle = "red"; 
ctx.fillText(text, 10, 200); //draw text at position x=10, y=200 
```

Наконец, используйте немного кода для загрузки полученного изображения:

var url = canvas.toDataURL('image/png'); 
var anchor = document.createElement('a'); 
anchor.download = 'save_me.png'; 
anchor.href = url; 
anchor.click();

Вот JSFiddle к этому образцу.

источник

2017-02-22 22:38:22

Привет, Алекс, выглядит так, как есть - я смог разместить только один элемент в JS - мне всего шесть. Я дал каждому входному идентификатору другой идентификатор, но не понимал javascript. –

@OwenDawson В примере кода jsfiddle есть функция 'addText' - измените его на три параметра - один для текстовой строки, а второй для координат. Затем по строкам от 31 до 33 текст извлекается из поля ввода и добавляется к изображению с использованием этой функции. Вам нужно будет повторить этот код 6 раз с помощью 6 различных идентификаторов ввода. –

Привет @Aleks G, это то, на что должны выглядеть периметры? Я немного запутался. 'function addText (plot, price) { var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext ('2d'); ctx.font = '40px Arial'; ctx.fillStyle = "red"; ctx.fillText (график, 10, 200); ctx.font = '40px Arial'; ctx.fillStyle = "red"; ctx.fillText (цена, 100, 200); } ' –

метод CSS

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Display form input</title> 
</head> 
<body> 
    <form> 
     <input type="text" id="input1"> 
     <input type="text" id="input2"> 
     <input type="text" id="input3"> 
     <input type="text" id="input4"> 
    </form> 
    <img src="yourimage.jpg"> 
    <!--You should position these elements with css above your image--> 
    <p id="text1"></p> 
    <p id="text2"></p> 
    <p id="text3"></p> 
    <p id="text4"></p> 
</body> 
</html>

JQuery:

// Detect form changes 
$('form').change(function(){ 
    // Get value of form 
    $input1 = $('#input1').val(); 
    $input2 = $('#input2').val(); 
    $input3 = $('#input3').val(); 
    $input4 = $('#input4').val(); 

    // Change text of placeholders to form values 
    $('#text1').text($input1); 
    $('#text2').text($input2); 
    $('#text3').text($input3); 
    $('#text4').text($input4); 
});

метод PHP

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Form to jpeg</title> 
</head> 
<body> 
    <form action="toimage.php" method="GET"> 
     <input type="text" name="text1"> 
     <input type="text" name="text2"> 
     <input type="text" name="text3"> 
     <input type="text" name="text4"> 
     <input type="submit"> 
    </form> 
</body> 
</html>

toimage.php:

<?php 
// Set image type 
header('Content-type: image/jpeg'); 

// Create image from photo 
$jpg_image = imagecreatefromjpeg('yourimage.jpg'); 

// Set color RGB 
$white = imagecolorallocate($jpg_image, 255, 255, 255); 

// Path to font 
// Must be .TTF 
$font_path = 'arial.TTF'; 

// Get input values and store in vars 
$text1 = $_GET['text1']; 
$text2 = $_GET['text2']; 
$text3 = $_GET['text3']; 
$text4 = $_GET['text4']; 

// imagettftext($jpg_image, text-size, text angle, x-co, y-co, color, path to font .TTF, text); 
// You will have to change the text-size, x-co and y-co so that each text item is positioned exactly at the place you want it to. 
imagettftext($jpg_image, 25, 0, 25, 50, $white, $font_path, $text1); 
imagettftext($jpg_image, 25, 0, 25, 150, $white, $font_path, $text2); 
imagettftext($jpg_image, 25, 0, 25, 250, $white, $font_path, $text3); 
imagettftext($jpg_image, 25, 0, 25, 350, $white, $font_path, $text4); 

// Display jpg 
imagejpeg($jpg_image); 
// Delete from memory 
imagedestroy($jpg_image); 
?>

источник

2017-02-22 15:08:54 EndPostive

спасибо за ваш ответ EndPostive - Идеально, я хочу, чтобы иметь возможность размещать введенный текст над изображением и сохранять изображение в формате jpeg, чтобы я мог отправлять по электронной почте. Я открыт для любых более легких предложений, только я думал, что это единственный способ: –

@OwenDawson не проблема, использование PHP, безусловно, возможно. Я не знаю другого более простого способа сохранить его как jpeg. Если никто другой не ответил через 6 часов, я могу заглянуть в него для вас, когда вернусь домой. Не должно быть слишком сложно :) – EndPostive

Ах, привет, приятель, просто подумал о том, чтобы делать это так, поскольку конечный пользователь может легко это сделать без использования PS и т. Д., Есть несколько бит онлайн, но он не очень подходит для того, что мне нужно. не думаю. –

Поместить содержимое с формы непосредственно на изображение

ответ

Смежные вопросы