ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
13 сообщений из 13, страница 1 из 1
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39271223
Fine
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Fine
Участник
Добрый вечер.
есть один image , скажем
//<img src='aaaaa'></img>
im=document.getElementsByTagName('img')[0]
a1=3
a2=4
теперь как разделить на а1Ха2 частей и получить base64 стоку для каждой части ?

++++++++++++++++
| 1 | 2 | 3 |
++++++++++++++++
| 4 | 5 | 6 |
++++++++++++++++
| 7 | 8 | 9 |
++++++++++++++++
| 10 | 11 | 12 |
++++++++++++++++

спасибо
...
Рейтинг: 0 / 0
09.07.2016, 22:34
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39271225
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Fine,

рисовать каждый фрагмент на канве,
канву - в base64 потом
...
Рейтинг: 0 / 0
09.07.2016, 22:43
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39271227
Fine
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Fine
Участник
ИзопропилFine,

рисовать каждый фрагмент на канве,
канву - в base64 потом
Нашел код, изменил, но что-то не так. Можете подсказать где ошибка ?
Спасибо

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
var canvas = document.createElement('canvas'), // In memory canvas
    ctx    = canvas.getContext("2d"),
    parts  = [],                               // to store base64 strings
    img1    = new Image();

img=document.getElementsByTagName('img')[0]	;	

  var w2 = img.width  / 2,  // 130
      h2 = img.height / 2;  // 40
  canvas.width  = w2;
  canvas.height = h2;
  for(var i=0; i<4; i++){
    var x = (-w2*i) % (w2*2),
        y = (h2*i)<=h2? 0 : -h2 ;
    ctx.drawImage(this, x, y, w2*2, h2*2); // img, x, y, w, h
    parts.push( canvas.toDataURL() );     // ("image/jpeg") for jpeg
    
  }
...
Рейтинг: 0 / 0
09.07.2016, 23:11
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39271230
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Fine,

мне проще рабочий код выдать, чем тараканов гонять, а их есть.

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
        var a1=3, a2=4;
	var parts =[];        
	var width = img.width/a1, height = img.height/a2;
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
	for (i=0;i<a1;i++){
           for (j=0;j<a2;j++){
	        ctx.drawImage(img, i*width, j*height, width, height,  0, 0, width, height);
	        var imgUrl = canvas.toDataURL("image/jpeg");
		var base64= imgUrl.split(',',2)[1]; // удалить data префикс если нужен чистый base64
		parts.push(base64);
	   }
	}
...
Рейтинг: 0 / 0
09.07.2016, 23:26
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39272463
Fine
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Fine
Участник
Изопропил,
спасибо работает
а можно те же самые действия выполнить не загружая фото? известен юлр адрес фото
...
Рейтинг: 0 / 0
12.07.2016, 14:53
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39272740
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Fineа можно те же самые действия выполнить не загружая фото? известен юлр адрес фото

в смысле - фото не статически на странице, а просто url - известен?
Можно. Неважно откуда Image взялся.
...
Рейтинг: 0 / 0
13.07.2016, 00:41
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39272870
Fine
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Fine
Участник
ИзопропилFineа можно те же самые действия выполнить не загружая фото? известен юлр адрес фото

в смысле - фото не статически на странице, а просто url - известен?
Можно. Неважно откуда Image взялся.

страница на которой выполняется скрипт,
im=document.getElementsByTagName('img')[0]
не оригинал, оригинал находится по другой ссылке.
теперь как выполнить те же действия для оргинала, (не перейдя по адресу, не загружая оригинал) если есть юрл оргинала?
...
Рейтинг: 0 / 0
13.07.2016, 10:48
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39273116
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Fine,

политика безопасности не даст экспортировать канву, на которой выводили изображения, полученные с других сайтов
...
Рейтинг: 0 / 0
13.07.2016, 14:20
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39275015
Fine
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Fine
Участник
ИзопропилFine,



Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
       
	var parts =[];        
	var width = img.width/a1, height = img.height/a2;
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
	for (i=0;i<a1;i++){
           for (j=0;j<a2;j++){
	        ctx.drawImage(img, i*width, j*height, width, height,  0, 0, width, height);
	        var imgUrl = canvas.toDataURL("image/jpeg");
		var base64= imgUrl.split(',',2)[1]; // удалить data префикс если нужен чистый base64
		parts.push(base64);
	   }
	}


спасибо Изопропил за готовый код.
работает, но есть проблемы с индексами.

при var a1=3, a2=3; рисунок должен быть разделен на части
123
456
789
(данный код разделяет сверху вниз)
и в массиве должны они стоять по очереди
Код: javascript
1.
 parts=[123456789]



при var a1=2, a2=4; рисунок должен быть разделен на части
12
34
56
78
также в массиве:
Код: javascript
1.
 parts=[123456789]


спасибо
...
Рейтинг: 0 / 0
15.07.2016, 23:47
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39275043
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Fine,

изменения для этого минимальны
как вырезает фрагмент ctx.drawImage - понятно?

чтоб изменить порядок обхода - нужно внимательно посмотреть на циклы
...
Рейтинг: 0 / 0
16.07.2016, 08:04
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39281705
Fine
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Fine
Участник
Изопропил,
Спасибо.
Действительно, там надо было поменять местами i и j.

Теперь возник такой вопрос, img у меня выглядет вот так:
Код: html
1.
<img class="myclass" src="https://www.mysyte.com/111.jpg" style="top:-150%; left: -150%">



как взять и раделить на части сам оригинал?
то есть непосредственно https://www.mysyte.com/111.jpg а не img который появляется после style="top:-150%; left: -150%"
...
Рейтинг: 0 / 0
28.07.2016, 10:43
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39281726
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
Fine,

Код: sql
1.
	var width = img.naturalWidth/a1,height = img.naturalHeight/a2;
...
Рейтинг: 0 / 0
28.07.2016, 11:18
| Ответить | Цитировать | Написать  
Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
    #39281739
Fine
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Fine
Участник
Изопропил,

Код: javascript
1.
2.
img=document.getElementsByTagName('img')[0];	
var width = img.naturalWidth/a1,height = img.naturalHeight/a2;



и в переменную img я получу оригинальный img, а не часть -150 -150 ?
...
Рейтинг: 0 / 0
28.07.2016, 11:29
| Ответить | Цитировать | Написать  
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript, как раздeлить image на несколкьо частей и получить base64 стоку для каждой?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]