fengyuanchen / cropperjs

JavaScript image cropper.
https://fengyuanchen.github.io/cropperjs/
MIT License
13.09k stars 2.41k forks source link

How to write cropped image on server in expressjs #536

Closed nccho closed 5 years ago

nccho commented 5 years ago

Is your feature request related to a problem? Please describe. I do not know how to get Blob Data from server side code.

Describe the solution you'd like I want to save cropped image to server side and i need example.

[client code] cropper.getCroppedCanvas().toBlob((blob) => { const formData = new FormData(); formData.append('croppedImage', blob, 'avatar.png'); $.ajax('/uploadImage', { method: 'POST', data: formData, processData: false, responseType : 'file', success: function () { console.log('Upload Success'); }, error: function (xhr, status, error) { console.log('Upload Error: ', error); } }); });

[server code - expressjs] ` router.post('/uploadImage', function(req, res, next) {
console.log(req.body); /*

I want to save a image file

*/ }); `

[server log - req.body] / [Object: null prototype] { '------WebKitFormBoundaryDeasN7ecVq5qiZdo\r\nContent-Disposition: form-data; name': '"croppedImage"; filename="avatar.png"\r\nContent-Type: image/png\r\n\r\n�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHD R\u0000\u0000\u0000�\u0000\u0000\u0000p\b\u0006\u0000\u0000\u0000[�?�\u0000\u0000\u0010\u0003IDATx^�]�n\�\u00 12\u001e�����\u0014��\u0004�E\��XMT�W\u0015%.�ml��-/l�n\u0014\u0015�u���Fv��}�\�\u0004�$ �\u0019�\r��<��Cr�=k�.G�--�3�8\u001f�ók��t\n��\b0\u0002(\u0002kL\u0010�\fF �\u0000\u0013���\u0 011� �\u0010�\u001a~��\t���=�=���������\u0001���\u0003LO������\u001elv����=����Ȟ ��\b,-\u0002\u0016A�\u001f���o\u001b�m�"@\u0010I����\u0011�\u001bki!b�kF� ��\u001e���\th\u001b �\u001e\u000e�~�\u001f�\'� ȃ�H�~|7\u0005eH� 5����}f\u000b" b\u0017k�\u0015��\u0019zA�p�ZC!\u0002\t R\fR x<��G���zp\u000f.\u001f\u0004 �6\�\u0014L�K�j˟3\u0002���C\u0010#�\u0000��\u0007�D\u001d�� �S��|,˼\u0011�\u0010��h,�P=�L4\f���"� �mE0�\u0017\u0004y����juS}\u0000�.\u001f�Y��=KF@ J\u00 10[��4p��b�\u0010��', 'K�\u0000B\u0010\u001dw���\u001d�\u0003�{Ȃ����b-�.��\b\u0002�,\u0016#�\bԊ\u0000\u0013�֕�y�\u001 0���F�"�\u0004�u�y�$\u0004� $��Q�\b0Aj]y�7\t\u0001': '', '\b\t': '', 'nT \u0002L�ZW��MB�\tB��\u001bՊ\u0000\u0013�֕�y�\u0010X�L': '', '�^,\u0012TܨF\u0004� 5�:ϙ�\u0000\u0013�\f\u00157�\u0011\u0001': '', 'H���s': [ '', '' ], '#�\u0004!C�\rkD�\tR���\b0A�Pq�\u001a\u0011�Ը�<g2\u0002L\u00102TܰF\u0004� 5�:ϙ�\u0000\u0013�\f\u00 157�\u0011\u0001': '', '#�\u0004!C�\rkD�\tR���\b0A�Pq�\u001a\u00110\b2���C�-��>�N��>�y\r��g�?����\u0004�\u0006 7�zp\f�#�': '\u0000����P>�\u000e<\u001f���-���\u00038�\u001c���\u0000\u000e�\u0004F⏱��\u0010��war�I\u00 02\u0000��aļ�aה]�?\u00008id�����y>�2\t��w��\f�,̈́\u0000�<���\u00114���1�[\u0018jL���\u0001 \\u001dj�4v681��B�mx�\u0016̔\u0017�T�ḇ�S��:�RnA��\u001eo�\bE\nQ\u0010s\u0011��nI��9\u0011$�P �"\u0007`\u0004\u0019\�a��\u0002x\u0004��}\tOZ�\t�o>i�K ��\u001f��]�t҈v�ۊ�4B\n�n5do�\rc�\t\u 0011Dn\u0000o�rÑ��$\u001eAԎ���h\b��Cg�$���z\u0007��<\u000b�(~�ۊ��ݖ�X�N�2,H\u0006A\u0004N�� 3�C \b��I�~\t��c�kXB�:x��\u0019ۀN��QA\tb-|� ��%\u0014t\u0017�;7�TX��\u001d^,\n���v�� ��} ��b=�X\u0019\u0004�].Dž�\u0010a���n<$���z��lA�ث\t\u0012�)����,]\u0002���\u0011��I\u0016��\ r�x��\u0019\u001aS\u001fQ�vw��fz\f�b�ON\f�\u0013D�5i�u]*���6\u0016>~�窄�vr\fBb�g�A|\u0017�YЯrc\ u0010Ҵ��[\u0004�²��:F\u0010=0�Z��@]��\u0002\u0011\b"C\u00073�\u0011\u000fһ�A���\u0000\u000f�\u0018. )�\u0017t�p^��\rA�lLb��ΕeA�Aa^\u0016 �iól�\u001b', '��W�': '�� �o\u0013�H�,�\u0012s\t[m�OZ\u00038�\'\u0005�l\u001e����\u0015�C�\���lA:���Y�X�W s\u0 01eAB��\n��\u0003�O�LK�\u0001²Xy\u0016D��m�w) -�d<�K���M\u000e�W�R$\u0003S.\u0016��X\u001eE�R ��\u0013$1}\u0007�#H�\u0005I�g���\u0001��y�\u0014N�\u000e\u0012|\u0006}��9��6md9�3R�I��<�%� �eg=�g\u0005�XIyV��\u0012\u0012�=� Y������\u001e\u0014�L\u0010m�v�\u001b�i��\u0012\u000e\u000f� yvֹS�\u0019�\u0013�V~�?\u0013\u0004\t\t\u0012>����.\u0002AR�#�@�J\u0010�ݾ����!\u000b�ϙ\u001c�Z� \u0003i\n/k��,ֲΘ�f\u00042\u0010`�d��M�C�\tRߚ�3\u0010X}��U3��u"�\u0011D�9u��|[�\u0017�\'�^�.V ��S�t�"W��u��,^�lF\u0006���H��\b��Z,����K��\u0002�P�\u001aQǼ�۹�L��[\u0013W\u0004B%��) ���a/', ';��\u0019�{��(���rzoa�5"_Xw�T�(g�\\����"�?�Ύ���Y\b"\u00058�3�M����ִ\u000b': '�U@��\u0013$\b��\u0004����5���\b\u001e\r��4�NJ� �|#P,\u0019��\u0013��{�Wo;�#��Q�X%�� 9�S���� �7J��تuԇ�\u0014���\u0015�@3\u0013\u0004U��', '��R H�l�؂t<R\u0017����]Ҳ�BtX,': '', 'A�]MU>c\u0016D�\u0015��\t\u001cH�\u0000K�F\rYR\u0001�Kn� O.��\u000bprl�Ί��NY\u0010��"\\R�E"H��\ '�p˸\r��/��': '\u0004\tb�5D\u000f�]��}�N>s\'[D�ؘ�,HG��\u00151],�ɸD��gX��ˬnN���t�<\u000b�Ka�\u0004q�� �\ u001c],lC', 'X\u0010}M�:��̠S���\r�\u0014�1�D/4}\u0006\u0017K]�����I9r�\\,�Ç�/{��Ɣ��܂\u0018�}Mk�,� ��6A\l�\u0013ۭ�Y\u0007Sw\b\u0004A�t��h�g�{ޟ�{�F��Fa4�b�.$Yw����R\u0005�O�r�<\u0001wb��J ��]\u0016�v��Xս�{\u0000��#w��BVz���b�\tB\b�\u0013��\u0011$���\u001aD#�33)ق�/���W#S-H\u0012\ u0002w}�\r�\u000f\u000b�\u0010 �\u0019d\u0006�3\u0011$!k8� 3�c�z\u0019O���X\n6�zx�"��\u0002���\u00 15x��p-w�\ti^!:1\u0013\u0014�A*�\u0019��>l� �ŊW#���c\u00100,xH�s�nab��i^�\u000e���_g�4o�03qP\ u0018O�Rc^�(�\r\u0000�U3!��\u0016(ƞ�I����\u000e�.\n7\u0007խȂ$�>�P���\u0018��˓,aCO}a�v��i^� \u001c�\u0015.\u0004\t\u0012gF\u0005��eA��D��Uș\u0013\u0013���J�|�\t���g"�\f��\u0013x�f,؂d(�N� �\u0014PS;�J��P�V��Ur]/�|�\u0004�J�W�\u0016 g�涌��\u0000\u0013�U�\u0011� �\u0004a�\u0004� �\u 0003�@\u0019\u0002lA�p�^� �\u0004�d�y�e\b0A�p�^� �\u0004�d�y�e\b0A�p�^� �\u0004�d�y�e\b0A�p� ^� �\u0004�d�y�e\b0A�p�^� �\u0004�d�y�e\b0A�p�^� �\u0004�d�y�e\b0A�p�^� �\u0004�d�y�e\b0A �p�^� �\u0004�d�y�e\b0A�p�^� �\u0006\u0000��d\u0002�����2\u000e��A��oA��\u001a�J6?�': '', '\u0011\u0001�)ͥ\u0005A�I�yp\u0004Ýk8��\u0019n�\u0003��;p}x\u0001?�\u0012�c���\u001f#墨�b\f\u0017 ����h�\u0006v����F�\u001b�\u001cy��<7ov���/,�3\u001a���a\'[\ng1�O�\u0016o�����': '', '4���7�E�w�Ÿ�X<�x�\u0002\u000e�#�O\tϟG\u0011�-\bi��$� �h\bC8�F�#TL�лu3\t���a��\tb�u\u00 03ov��)���\u001ec�W���ג��\u0004��� ��': '7R�Ο�\r�\u0019~��G\u001bp܍᷷����|E\b�X1h,\u00024V\u0013\f��p�7\u000fA��\u0000�^��\u000flAzaHd ��\u0017�ɴ�r2�UjA�\u0002���\\ {�\u0017n�9�N�йk', '�|yR.֗� ʽ3]L%�����\u00186.�й����� �����]�yԂ�K\u0010�]��\u0005���x��C�\u0015k�� }��!���.�\u0012D}�\f���j�\\���Pk�\u0011���؂��\u000bR�p���\u0006\',��J�\u0005q?\u001b�AV ����*\b���f�C[��8\u0006!)y�QԂL': '', '\u0013�Ŋ\' �g\u0005�\u0005��]�� ��b��\'�w���zr\u0016�\u0017ʼn\u000e��a*��\f\u000e��\u001 3�y� h\n7\u0010ЇҭE�\u0010e���4�\u0010����\\�x)c�X�w0\u0006�뺭N\u00013A�!HY\u0016�}v�\u001b� L\u00 10TtI��\b��\u0006�]{\u0005_��D�o�/���K���': '�,Z�9Ht�\u0002c��FҚ\u0018\u000fc��C��(3��ϟ �NN:�� nr!g]� 9h}���\u0018�L���\u000b;�\u0016 \'!HN��\\���],�\u0001Z5\u000bҸ��70eXF� eZ��kF\u000b��(n�\b,', '\u0002s� �9a��\u0011�\u000b\u0001� }!��,-\u0002lA\u0016}�\n�\u000e�>�U��̂ ���t��\u000b\rL�lj\ u0000��D]d��7���j�t�7��l�%�q��I\u0011w#E�}R����x��\u0015�\u001c�\u0012,��sڅsU\u0010��� �]H%': '�k�MtR4e\'p:1����|W��\u0014����j���{�� �${/鏡H(�w���R��q��R#�\u001dzw�L\u0011�\u0 005�F��ٔw��@�w|>\r3��}���d2\u001d�b�}�\u0015ƹ���s\u000fO\t�j3Â\u0014U��B������l�%6 �Q�:�V@�ʿ��t\t���pf!J\',���B\u0004���C�W�fjz\u0013~uC��::', '1���P': '', '��mR�>�': '', '�j^u?�>|��4�\ty\u0000�\u0010�\u0011���Sf;�Gf��kG��\t\u0003g��e�t�����و�����t5\u0016� Q;wU݄���\r��d�m�$H^�����Z\u0010K�@5�m��n���k�����k�i8\u00048r�BPe�]�f���%�.�A�� ���\u001bR���p����\u0011���~��c�,\u000b���"�h?��E�����;2�����\b\u001b� w���^� ': '���`4t{0~�LJ8��', '�S����^\u001d\u0018� ���oI?E��چ\u001a�\u0017���ׂ8�I��\u000b�Y!�#\u0016$�~�Y,ϱ\b�\u0003R\ u0016�\u000b�\u0013\t�4AⳜ����i�\u0014��j}��ׂ���\u0013d�q1}$� \u0018 }\u0010$��t�Ж �D': 'P9,���1L�\u0006�|�s.�\u000f�"�e��\t\u0006�Q��-=��T�_�[���\u0016�J��r\u0005��O��ip�\ u0005\u0016d<�L�d\u0007�!����謋1�y�x$\u0013�8���Ϳb�Ȃ�Z��ʹ1d�2>�ӯeR݃�T�85��,\u000b�', '����l��d��j�7��\u0005�?;��7�V�L\u0000\u0000\u0000\u0000IEND�B�\r\n------WebKitFormBoundaryDeas N7ecVq5qiZdo--\r\n': '' } */

fengyuanchen commented 5 years ago

This is a question about how to upload a client image to the server. I suggest you ask for help on StackOverflow.

nccho commented 5 years ago

@fengyuanchen

That's right your sample code. My sever code was wrong so i fixed my code. I used multer with expressjs and resolved a problem.

I thank for cropperjs. v