如何使用Croppie（网页图片裁剪工具）

Question

我发现 Croppie 是一个非常适合我正在从事的项目的工具。设置 Croppie 后，我能够成功查看需要裁剪的任何图像，但是从系统中选择图像时，裁剪效果就会发生，因此尝试裁剪图像随后不起作用，并且当裁剪的图像时显示它显示图像加载时被裁剪的部分。

  $scope.submitImage = function(){
             $('#myImage').attr('src', source);
         }

var source = "";

var docrop = function(imgsrc){
var vanilla = new Croppie(document.getElementById('item'),{
                viewport: {
                    width: 80,
                    height: 80,
                    type: 'circle'
                },
                boundary: {
                    width: 400,
                    height: 400
                }
            });

            vanilla.bind(imgsrc).then(function() {
                vanilla.result('canvas','original').then(function (src) {
                                source = src;
                });
            });

         }

Answer 1

回答一个老问题，但我是新人，可以使用这些要点；）。您所描述的行为正是 Croppie 的设计目的 - 它在将图像发送到服务器之前在客户端裁剪和缩放图像，从而最大限度地减少上传时间和存储空间。如果您想将全分辨率文件发送到服务器，并包含稍后可以更改的缩放和裁剪信息，则需要使用不同的工具。