Блог

Как видно на изображении, у меня есть index.html (в нем есть index.js ) который загружает несколько изображений с использованием массива изображений json и щелчка по значку редактирования, мне нужно отправить информацию о нажатом изображении на другой сайт, скажем: index1.html (в нем есть index1.js ) таким образом, он будет загружаться в редакторе с использованием canvas…

изображение

Кажется, я не могу передать его с помощью сеанса или локального хранилища, потому что это дает мне последний результат индекса вместо определенного индекса массива, связанного с событием click. Я не знаю, нужно ли мне использовать сервер для загрузки всех изображений или нет, в настоящее время я не использую сервер.

 var k=0;
var filesArr = [];
var newArr = [];
if (input.files amp;amp; input.files[0]) {
    $(input.files).each(function () {
        var reader = new FileReader();
        reader.readAsDataURL(this);

        reader.onload = function (e) {
            filesArr.push(e.target.result);
            newArr = JSON.parse(JSON.stringify(filesArr));
            var jsonedImgArr = [];
            var file = {};
       // manually create a new file obj for each File in the FileList
            for (var i = 0; i < newArr.length; i  ) {
                var source = newArr[i];
                var name = input.files[i].name;
                var id = i;
                file = {
                    'id': id,
                    'name': name,
                    'src': source
                }
                //add the file obj to your array
                jsonedImgArr.push(file);
            }//$("#previewImg") is an id="" inside a div
            $("#previewImg").append("
                 <div class='container1'>
                     <img class='img-fluid1 img1 ' src="   jsonedImgArr[k]['src']   ">
                     <p class='title'>"   jsonedImgArr[k]['name']   "</p>
                     <div class='overlay'></div>
                     <button type='button' class='responsive-width' data-toggle='modal' data-target='#myModal'>
                         <i style='color:white;' class='button far fa-edit'></i>
                     </button>
                     <div class='modal fade' id='myModal'>
                        <div class='modal-dialog modal-xl'>
                            <div class='modal-content'><div class='modal-header'> 
                               <button type='button' class='close responsive-width' data-dismiss='modal'>amp;times;</button>
                            </div>
                            <div class='modal-body'>
                                <iframe id='frame' style='width:100%;height:100%;' src='index1.html'></iframe>
                            </div>
                            <div class='modal-footer'>
                                <button type='button' class='btn btn-secondary responsive-width' data-dismiss='modal'>Close</button>
                            </div>
                            </div></div></div>");
                            k  ;
       }
  

 //the src should be instead of the '' down here
fabric.Image.fromURL('', function (oImg) {
    add(oImg,75,98);
});
  

Мне нужно получить индекс и массив в файл «index1.js » таким образом, я мог бы отредактировать, сохранить и обновить существующий массив json на «index.js «как это появится на «index.html «как видно на изображении.