Визуализация наложения рамы на фото

151

27 августа 2019, 02:50

Делаю калькулятор для сайта багетной мастерской. При выборе багета (рамы, в которую будет вставлена картина), нужно фото этого багета накладывать на загруженное пользователем изображение (его я подгружаю через FileReader). Вопрос: каким образом это сделать? Использовать ли Canvas или без него можно обойтись?

$('.input_image').on('change', function(event) { 
  if (FileReader) { 
    var selectedFile = event.target.files[0]; 
    var reader = new FileReader(); 
 
    var imgtag = document.getElementById("myimage"); 
    imgtag.title = selectedFile.name; 
 
    reader.onload = function(event) { 
      imgtag.src = event.target.result; 
    }; 
 
    reader.readAsDataURL(selectedFile); 
  } else { 
    console.log('FileReader не поддерживается в этом браузере!') 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="file" class="input_image"> 
<img id="myimage" style="max-height: 200px; max-width: 100%;">

Answer 1

На самом деле вариантов решения может быть много (включая изыски с border-image), но самый простой вариант, как мне кажется, - это отображать загруженную картинку в div'е, у которого багеты будут выступать в качестве фона:

function readURL(input) { 
    if (input.files && input.files[0]) { 
        const reader = new FileReader(); 
        reader.onload = function(e) { 
            $('.upload').attr('src', e.target.result); 
        } 
        reader.readAsDataURL(input.files[0]); 
    } 
} 
 
$('[type="file"]').change(function(){ 
    readURL(this); 
}); 
 
$('.clear').click(function(){ 
  $('[type="file"]').val(''); 
  $('.upload').attr('src', ''); 
  $('[type="radio"]').prop('checked', false); 
})

.picture { 
  margin-top: 20px; 
  padding: 35px; 
  display: inline-block; 
  position: relative; 
  background-size: 100% 100%; 
} 
.upload { 
  max-width: 500px; 
} 
[type="radio"] { 
  display: none; 
} 
label { 
  display: inline-block; 
  width: 80px; 
  height: 50px; 
  background-size: 100% 100%; 
} 
[for="one"] { 
  background-image: url('https://i.stack.imgur.com/WefMa.jpg'); 
} 
[for="two"] { 
  background-image: url('https://i.stack.imgur.com/brSXK.jpg'); 
} 
[for="three"] { 
  background-image: url('https://i.stack.imgur.com/w1FmU.png'); 
} 
#one:checked ~ .picture { 
  background-image: url('https://i.stack.imgur.com/WefMa.jpg'); 
} 
#two:checked ~ .picture { 
  background-image: url('https://i.stack.imgur.com/brSXK.jpg'); 
} 
#three:checked ~ .picture { 
  background-image: url('https://i.stack.imgur.com/w1FmU.png'); 
} 
.clear { 
  display: block; 
  margin-top: 20px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="radio" name="baget" id="one" /> 
<input type="radio" name="baget" id="two" /> 
<input type="radio" name="baget" id="three" /> 
 
<h1>Загрузите картинку</h1> 
<input type="file" /><br /> 
<div class="picture"> 
  <img class="upload" src="" alt="" /> 
</div> 
 
<h1>Выберите багет</h1> 
<label for="one"></label> 
<label for="two"></label> 
<label for="three"></label> 
 
<button class="clear">Очистить</button>

Конечно, чтобы это всё смотрелось красиво, у багетов должны быть одинаковой толщины края (эту толщину нужно указать в качестве padding'а блоку с картинкой).

Также важный момент: <input type="radio" /> не случайно отделены от своих лейблов и размещены НАД блоком с картиной - только в таком случае будет работать css-конструкция :checked ~ .picture