Форумы / Cotonti / Extensions / Add a page and then crop image

Harker
#1 10.09.2014 10:05

Hello to all,

I come towards you to find a way of making. At present I use to pageavatar to allow the users to add an image. This extension works well but when I use the crop function it is not still very attractive

ex: http://hpics.li/f0eb7e2

what i'd like is that when the user adds a page it is redirected to the plugin to change the thumbnail generated by pageavatar. But i have no idea on how to do it because after adding a page, it is placed directly awaiting approval. does it go if i add the hooks page.add.last element in my plugin ?

Here is the plugin that i want to add : https://github.com/mkrmpotic/Simple-Image-Crop

Macik
#2 10.09.2014 13:37

What version of «pageavatar» do you use: 2, 3 or 4 ?

Добавлено 3 минуты спустя:

Or may be «pageMavatar»?

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Harker
#3 10.09.2014 13:50

I use pageavatar Version=4

esclkm
#4 10.09.2014 18:09

Harker .

You need totally rewrite pageavatar: because ints make crop serverside,,. But you need ajax upload + crop and only than save it to server. 

It's just another plugin )

littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Harker
#5 10.09.2014 18:43

Yes, I understand what you mean but to be honest, i do not like this method with ajax. It creates a tempory files on the website and if the user stop the action, the file does not disappear (with my tests). It would create a cron file to remove the images in the temps folder etc... I find this really paintfull method ^^

I found it easier to ask the user to change the thumbnail if he wanted but only after sending the file and the creation of the first thumb.

Added 2 days later:

Yop,

After some research, I found a script that launches the client-side script.

Here it is : http://marx-tseng.appspot.com/image_crop/index.html

Now I find myself with a new problem, I can upload the big picture with <input type="file".....

do you have a solution to upload the second image in an input format (gif,jpg,png) and not base64 ?

Отредактировано: Harker (12.09.2014 16:11, 9 лет назад)
Macik
#6 12.09.2014 21:57
https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Harker
#7 13.09.2014 13:16

Thank you so much for the link

With the links, I understand how to save the image created with a button "save-as"

The little thing i'm trying to make is that the data : " data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA............" be added to the input of PageAvatar

Now, I have this => <input type="file" name="pageavatar" id="image_souce" value="" class="file" size="56" />data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA....</input>

but it does not read as a file and it does not work obviously

I tried to change PageAvatar to change the data in the image format and then be read by the plugin but I can not do

In any case, thank you for your help, it's much appreciated

 

 

Macik
#8 13.09.2014 17:26

As I see, there are 3 way to solve a problem^

  1. Use raw «base64 PNG» image data — for that use common input field type `text`. Than decode it on serverside and save as normal PNG file.
  2. Made JS code for follows: convert `PNG data:image` → canvas → common `img` tag with desired format (PNG/JPG/GIF) → «data:image with certain format». Save it to server as noted in p.1
  3. [not sure for that] Get binary data from base64 and try to send it via AJAX emulating common POST form file uploading (`multipart/form-data`)

Note: you can not use code to attach any data via input type `file` directly.

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
Harker
#9 13.09.2014 21:16

With the ideas that you have given me, I finally found this : http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

I will try to adapt the script