图片裁剪和原始图片Javascript AJAX

时间:2019-05-23 10:23:21

标签: javascript ajax

我正在裁剪图片。我正在上传要裁剪的图像。我也想上传原始图像。我该怎么办?

正是我想要的;

我正在发送要用ajax裁剪的图片。我想用ajax发送原始图片。

如果您能帮助我,我会很高兴。谢谢。

如果您修改代码,我将不胜感激

我的代码:

        window.addEventListener('DOMContentLoaded', function () {
                          var avatar = document.getElementById('resimFirma');
                          var image = document.getElementById('imageResim');
                          var input = document.getElementById('inputResim');
                          var $modal = $('#modalResim');
                          var cropper;





                          input.addEventListener('change', function (e) {
                            var files = e.target.files;
                            var done = function (url) {
                              input.value = '';
                              image.src = url;

                              $modal.modal('show');
                            };
                            var reader;
                            var file;
                            var url;

                            if (files && files.length > 0) {
                              file = files[0];

                              if (URL) {
                                done(URL.createObjectURL(file));
                              } else if (FileReader) {
                                reader = new FileReader();
                                reader.onload = function (e) {
                                  done(reader.result);
                                };
                                reader.readAsDataURL(file);
                              }
                            }
                          });

                          $modal.on('shown.bs.modal', function () {
                            cropper = new Cropper(image, {

                            aspectRatio: 450/600,

                            });
                          }).on('hidden.bs.modal', function () {

                            cropper = null;
                          });

                          document.getElementById('cropResim').addEventListener('click', function () {
                            var initialAvatarURL;
                            var canvas;

                            $modal.modal('hide');

                            if (cropper) {
                              canvas = cropper.getCroppedCanvas({

                                width: 450,
                                height: 600,
                              });



                              initialAvatarURL = avatar.src;
                              avatar.src = canvas.toDataURL();

                              canvas.toBlob(function (blob) {

                                var formData = new FormData();

                                formData.append('resimFirma', blob, 'resimFirma.jpg');



                                $.ajax('firmaResimYukle.php', {

                                  method: 'POST',
                                  data: formData,
                                  processData: false,
                                  contentType: false,



                                complete: function(data) { 

                                alert("Resim başarıyla yüklendi."); 

                                setTimeout(function(){
                                window.location.reload(1);
                                }, 1000);

                                },


                                });

                              });


                            }
                          });
                        });

谢谢!

0 个答案:

没有答案