Question

我正在尝试拼凑一个功能，供用户为他们的头像选择一个图像，使用javascript在页面上预览，使用jquery断头台选择裁剪，然后将其上传到服务器w /坐标它可以被处理。

到目前为止，我可以选择要上传的图像，它将出现在预览中，但断头台需要在调用图像时加载图像。当我选择图像时，有没有办法可以强制断头台重新加载？

这是我的代码：

<head>
<script src="{% static "assets/js/user_profile.js" %}"></script>
<script type="text/javascript">

    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("id_avatar").files[0]);

        oFReader.onload = function (oFREvent) {
        document.getElementById("avatar_preview").src = oFREvent.target.result;
        };
    };  
</script>
</head>
<body>
    <input type='file' id='id_avatar' name='avatar' onchange="PreviewImage();" /><br />
        <div id="parent" style="width: 300px; height: 300px; overflow: hidden;">
    <img id="avatar_preview" src="#" alt="your image" style="width:400px;" />
</div>
</body>

这就是我的user_profile.js中的内容，这是我在更改头像输入时要重新实现的内容：

jQuery(function() {
  var picture = $('#avatar_preview')

  var camelize = function() {
    var regex = /[\W_]+(.)/g
    var replacer = function (match, submatch) { return submatch.toUpperCase() }
    return function (str) { return str.replace(regex, replacer) }
  }()

  var showData = function (data) {
    data.scale = parseFloat(data.scale.toFixed(4))
    for(var k in data) { $('#'+k).html(data[k]) }
  }

  picture.on('load', function() {
    picture.guillotine({ eventOnChange: 'guillotinechange' })
    picture.guillotine('fit')
    for (var i=0; i<5; i++) { picture.guillotine('zoomIn') }

    // Show controls and data
    $('.loading').remove()
    $('.notice, #controls, #data').removeClass('hidden')
    showData( picture.guillotine('getData') )

    // Bind actions
    $('#controls a').click(function(e) {
      e.preventDefault()
      action = camelize(this.id)
      picture.guillotine(action)
    })

    // Update data on change
    picture.on('guillotinechange', function(e, data, action) { showData(data) })
  })

  // Display random picture
  picture.attr('src', 'img/unsplash.com_' + Math.ceil(Math.random() * 25) + '.jpg')
})

有没有办法将其包装成可以重新加载而无需重新加载页面并丢失预览的内容？

Answer 1

通过一些修改，您可以实现您想要的效果。首先，Guillotine的code demo比display demo的代码更容易理解。

每当您设置预览（更改src属性）时，将加载图像并触发（最终）onload事件。您只关心新预览何时完成加载，您不必担心文件输入的更改。

因此，每次图片加载时，请专注于重新加载插件，例如this。基本上归结为：

picture.on('load', function() {
  // Reload the plugin (remove existing instance if any and create a new one)
  if (picture.guillotine('instance')) picture.guillotine('remove')
  picture.guillotine({ eventOnChange: 'guillotinechange' })

  // Bind buttons, only once! (to avoid overlaps)
  if (! picture.data('bindedBtns')) {
    picture.data('bindedBtns', true)
    $('#rotate_left').click(function(){ picture.guillotine('rotateLeft') })
    $('#rotate_right').click(function(){ picture.guillotine('rotateRight') })
    // ...
  }
}

您可能还会发现Presto非常有用。它的唯一目的是显示文件输入中的图像预览。它优雅地回头寻找显示预览的最佳方式。

如果您还将其与Bifrost配对，则最后一次尝试将异步上传图像并从服务器获取预览（不需要HTML5，XMLHttpRequest或Flash），因此您可以确定＆＃39 ; ll可以在任何浏览器上进行预览。

不幸的是，我没有时间完成Presto的自述文件，但source非常干净，在顶部你会找到它的API和特征

希望它有所帮助。

重新安装javascript图像裁剪

1 个答案: