图片裁剪和原始图片Javascript AJAX帮助PHP

时间:2019-05-23 12:19:04

标签: 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 个答案:

没有答案