首页 > 解决方案 > 上传前更改图像方向

问题描述

我正在使用此答案在标签中显示上传的图像,img并且我还可以使用loadImage()答案中提到的内容更改图像的方向。

我的问题是我无法用input标签中上传的图像替换重新定向的图像。

除非提交表单,否则不会保存图像。所以我也不能在 AJAX 中做到这一点。任何帮助深表感谢。

$('img#image-pre').click(function(e) {
  var loadingImage = loadImage($('input#uploadform-file')[0].files[0], function(img) {
    var dataURI = img.toDataURL();
    document.getElementById("image-pre").src = img.toDataURL();
    $('input#uploadform-file')[0].files[0] = function(dataURI) { // create the new blob from the changed image.
      var binary = atob(dataURI.split(',')[1]);
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      var array = [];
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {
        type: mimeString
      });
    };
  }, {
    orientation: or,
    maxWidth: 500,
    maxHeight: 300,
    minWidth: 100,
    minHeight: 50,
  });
  or = or <= 8 ? or + 1 : 1;
  console.log($('input#uploadform-file')[0].files[0]);
});

标签: javascriptjqueryyii2

解决方案


你可能想看看这个: https ://stackoverflow.com/a/20285053/1990724

您可以将图像解析为 base64 字符串,然后使用 ajax 您可以将 base64 字符串发布到服务器。这可以在您让用户以正确的方式定位图像之后完成。


推荐阅读