Как реализовать работу с изображениями?

@Egor_code · Регистрация: 02.11.2019

Author24 — интернет-сервис помощи студентам

Пользователь загружает изображение-

HTML5

<form enctype="multipart/form-data" method="post">
   <p>Загрузите ваши фотографии на сервер</p>
   <p><input type="file" name="photo" multiple accept="image/*,image/jpeg">
   <input type="submit" value="Отправить"></p>
</form>

.
Надо это изображение вывести в canvas. Мы на php обработаем запрос и сохраним изображение. выводим в квас из файла -

Javascript

var img = new Image();
img.src = 'image.png';
var x=0;
var y=0;
ctx.drawImage(img, x, y); //ctx - canvas

Теперь пользователь смотрит, что ему надо (цвет опред. пикселя) и закрывает вкладку.
Но на сервере надо это изображение удалить!
Как защититься от переполнения памяти, и удалять его вовремя?

@sad67man · 17.10.2020, 22:30

Egor_code, Если вам нужно просто отображать картинку в canvas для этого необязательно его загружать на сервер. Это можно сделать на стороне js

@Egor_code · 17.10.2020, 22:31 **[ТС]**

Сообщение от sad67man

Это можно сделать на стороне js

А как?

@sad67man · 17.10.2020, 22:48

Egor_code, Через FileReader.

HTML5

1 2	<input type="file" name='file' class='js-preview-input'> <img src="" alt="" class='js-preview-image'>

Javascript

$('.js-preview-input').on('change', function() {
  var reader = new FileReader();
  reader.onload = function (e) {
    $('.js-preview-image').attr('src', e.target.result);
  }
  reader.readAsDataURL(this.files[0])
});

https://jsfiddle.net/vb87rctf/

Добавлено через 9 минут
Egor_code, В вашем случае будет так

Javascript

$('.js-preview-input').on('change', function() {
  var reader = new FileReader();
  reader.onload = function (e) {
    var img = new Image();
    img.src = e.target.result;
    var x=0;
    var y=0;
    ctx.drawImage(img, x, y);
  }
  reader.readAsDataURL(this.files[0])
});

@sad67man 2233 / 1279 / 611 Регистрация: 23.08.2015 Сообщений: 3,229
	17.10.2020, 22:30	2
	Egor_code, Если вам нужно просто отображать картинку в canvas для этого необязательно его загружать на сервер. Это можно сделать на стороне js 1

@Egor_code 2 / 2 / 0 Регистрация: 02.11.2019 Сообщений: 45
	17.10.2020, 22:31 [ТС]	3
	Сообщение от sad67man Это можно сделать на стороне js А как? 0

	17.10.2020, 22:48

Как реализовать работу с изображениями?

Решение