我无法将图像裁剪代码更改为定义的图像

Question

（我会再次尝试解释我的问题）

我在互联网上找到了一个脚本，你可以在这个链接中看到：

链接

但我无法更改为我想要的代码。

脚本开始工作图像上传，但我将使用定义的图像。代码必须以定义的图像开始。

例如：abc.jpg

如果我进入页面或单击链接，模型将打开。 abc.jpg 将准备好裁剪。我没有足够的 jquery 和 jscript 信息。

我想我必须更改下面的代码，但我无法更改。

如果您帮助我，我将不胜感激

<script>

$(document).ready(function(){

    var $modal = $('#modal');

    var image = document.getElementById('sample_image');

    var cropper;

    $('#upload_image').change(function(event){
        var files = event.target.files;

        var done = function(url){
            image.src = url;
            $modal.modal('show');
        };

        if(files && files.length > 0)
        {
            reader = new FileReader();
            reader.onload = function(event)
            {
                done(reader.result);
            };
            reader.readAsDataURL(files[0]);
        }
    });

    $modal.on('shown.bs.modal', function() {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 3,
            preview:'.preview'
        });
    }).on('hidden.bs.modal', function(){
        cropper.destroy();
        cropper = null;
    });

    $('#crop').click(function(){
        canvas = cropper.getCroppedCanvas({
            width:400,
            height:400
        });

        canvas.toBlob(function(blob){
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function(){
                var base64data = reader.result;
                $.ajax({
                    url:'upload.php',
                    method:'POST',
                    data:{image:base64data},
                    success:function(data)
                    {
                        $modal.modal('hide');
                        $('#uploaded_image').attr('src', data);
                    }
                });
            };
        });
    });
    
});
</script>

我尝试了很多次：

$('#upload_image').change(function(event){ 

相反

$("#abc").click(function(){ 

但是没用

Answer 1

首先；

我猜你有一个文件上传部分。

在你给出的js代码中；

var image = document.getElementById('sample_image');

这获取了 id 的元素

sample_image

还有；

$('#upload_image').change(function(event){
        var files = event.target.files;

        var done = function(url){
            image.src = url;
            $modal.modal('show');
        };

        if(files && files.length > 0)
        {
            reader = new FileReader();
            reader.onload = function(event)
            {
                done(reader.result);
            };
            reader.readAsDataURL(files[0]);
        }
    });

我认为这是文件输入，用于上传图像进行裁剪。因此，当文件输入发生任何变化（例如选择文件）时，它将运行这些代码。

var done = function(url){
            image.src = url; // <-- change src attr of image.
            $modal.modal('show');
        };

您可以删除上传部分并手动指定

img

src

属性。