相关疑难解决方法(0)

我以前从未做过这样的事情而且我在问这个怎么做.我可以找到如何用普通的html multiform部分等来做这个.但现在如何用ajax做到这一点？

伪代码:

HTML:

<input type="text" class="imgform" name="imagename" value="name" />
<input type="file" class="imgform_image" name="image" value="C:\Users\william\Pictures\image.png" />
<input type="button" id="btn" form="imgform" />

JQUERY:

$('body').on('click', '#btn', function(){
    var form = $(this).attr("form");
    var string = $('.' + form).serialize();

    var image = $('.imgform_image').value("form");
    image = converttobase64(image);

    $.post('action.php?action=uploadimg', string + {'image':image}, function (data){    
       datalader(data);
    });
});

不知道如何做到这一点.还有一种方法可以为多个img文件执行此操作,如果文件实际上是图像,则可以使用文件名作为图像名称,而不是使用输入文本字段.

任何提示,链接或代码示例都会有用,请提前感谢!

我一直在寻找一种方法来将动画GIF从给定的URL编码到base64而不使用像jquery这样的外部库(如果绝对必要,我将使用它).我找到了将静态图像编码为base64的结果,但它们都使用了canvas,并且canvas.toDataURL()只编码动画GIF的单帧.有没有办法将动画GIF(或任何图像)编码到base64而不使用canvas？

我想将图像从reactjs转换为base64以将该图像保存在mongo中，而无需将图像上传到服务器，然后如果不直接转换图像则进行转换

我正在努力尝试将给定的图像 url 转换为 base64 ......在我的情况下，我有一个带有图像路径的字符串

var imgUrl = `../../../../../assets/logoEmpresas/${empresa.logoUrl}`

我怎样才能直接在 base64 中转换给定的图像 url？...我试过这篇文章。

以角度 2 将图像转换为 base64

但是这篇文章是从表单中获取图像...我该如何调整它？

我正在尝试编写一个文件上传脚本以在安全的企业内部网中使用，但遇到了一些麻烦......

在下面的代码中，我没有收到任何错误，我所有的调试看起来都在工作，但最终结果总是一个“空白”图像：

var ctx = document.createElement('canvas');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
}
img.src = $('#UpdateImage:file');

var imgStr = ctx.toDataURL("image/png", "");
document.getElementById("Item_Create_Image_Avatar").src = imgStr;

当我在 'Item_Create_Image_Avatar' 对象上“检查元素”时，'src' 值看起来非常完美：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC" id="Item_Create_Image_Avatar" style="vertical-align:top">

为什么我的图像是空白的？

我在这里遇到了一些问题,这些问题给了我一些我现在遇到的问题的提示,但似乎没有一个问题符合这个要求.

我目前正在使用角度模块ngCropper(https://github.com/koorgoo/ngCropper),它可以轻松处理来自文件输入的图像,但我还需要它与外部URL一起工作.为了使用外部URL,我使用了faheyyy(https://github.com/koorgoo/ngCropper/issues/3)给出的建议,但现在我正在处理CORS问题,我无法对服务器进行更改.

所以,我想在隐藏的HTML元素上加载图像并以某种方式获取数据,将其编码为Base64,然后我就可以在cropper模块上使用它而无需创建新的GET请求(这将是创建CORS问题).我也尝试创建一个读取图像源的指令(该指令插入img元素)并尝试将其放在canvas元素上,然后获取dataURL:

.directive('toBase64', function ($document) {
    return {
        restrict : 'A',
        link : function (scope, element, attr) {

          element.on('load', function () {
            getBase64Image(element);
          });

          function getBase64Image(element) {
            var theImage = new Image();
            theImage.src = element.attr("src");
            var imageWidth = theImage.width;
            var imageHeight = theImage.height;

            var canvas = element.siblings('#cropCanvas');
            canvas.width = imageWidth;
            canvas.height = imageHeight;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(element, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
          }
        }
    };
}); …

我正在使用loopback-component-storage将图像上传到服务器. https://docs.strongloop.com/display/public/LB/Storage+component

我还有AngularJS JavaScript SDK,所以我的lb-services.js是动态更新的. https://docs.strongloop.com/display/public/LB/AngularJS+JavaScript+SDK

现在我想在我的网页中显示来自此环回组件存储模型的照片,称为容器,因此我可以在我的角度控制器方法getFile(来自lb-service)中使用,其中"获取指定容器内指定文件的信息".像那样:

$scope smthing = Container.getFile({container: 'news-imgs', file: 'smallpic.pnh'})

或者我可以使用方法下载,即"在指定容器中下载文件".像那样:

$scope smthing = Container.download({container: 'news-imgs', file: 'smallpic.png'})

在我的控制器中.

现在,问题是,当我在.html文件中写入时{{smthing}},第一种方法将显示给我

{ "container": "news-imgs", "name": "smallpic.png", "size": 757, "atime": "2015-12-01T11:49:36.840Z", "mtime": "2015-12-01T11:49:36.840Z", "ctime": "2015-12-01T11:49:36.840Z" }

而第二种方法将显示如此多的悲伤迹象,如下所示:

"0":"?","1":"P","2":"N","3":"G","4":"\r","5":"\n","6":"\u001a","7":"\n","8":"\u0000","9":"\u0000","10":"\u0000","11":"\r","12":"I","13":"H","14":"D","15":"R","16":"\u0000","17":"\u0000","18":"\u0000","19":"\u0014","20":"\u0000","21":"\u0000","22":"\u0000","23":"\u0012","24":"\b","25":"\u0003","26":"\u0000","27":"\u0000","28":"\u0000","29":"l","30":"\u000e","31":"\u000e","32":"\"","33":"\u0000","34":"\u0000","35":"\u0000","36":"\u0019","37":"t","38":"E","39":"X","40":"t","41":"S","42":"o","43":"f","44":"t","45":"w","46":"a","47":"r","48":"e","49":"\u0000","50":"A","51":"d","52":"o","53":"b","54":"e","55":" ","56":"I","57":"m","58":"a","59":"g","60":"e","61":"R","62":"e","63":"a","64":"d","65":"y","66":"q","67":"?","68":"e","69":"<","70":"\u0000","71":"\u0000","72":"\u0001","73":"?","74":"P","75":"L","76":"T","77":"E","78":"?","79":"?","80":"?","81":"?","82":"?","83":"?","84":"?","85":"\u0000","86":"r","87":"?","88":"?","89":"?","90":"?","91":"\u0000","92":"?","93":"?","94":"\u0000","95":"~","96":"?","97":"?","98":"?","99":"?","100":"\u0000","101":"x","102":"?","103":"\u0012","104":"?","105":"?","106":"\u0000","107":"","108":"?","109":"\t","110":"?","111":"?","112":"\u0016","113":"{","114":"?","115":"\u0002","116":"?","117":"?","118":"(",...etc

我认为这是Image对象,但在json中,对吗？

我也试图抛出{{smthing}}来<img src="">标记,<img ng-src="">但它并没有工作过.

问题是:如何显示这张照片？请问有人可以帮助我吗？

问候,艾伦.

我有这样的图像

<img id='my_img' src='www.someimage.com'>

我创建了这个函数来获取IMG节点并将其转换为画布和基础64数据

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg|jpeg|pdf);base64,/, "");
}

该函数被称为

getBase64Image(document.getElementById("my_img"));

但是当我发送图像时,它只返回一个被克隆的图像,它只返回图像的左上角,这里是它返回的图像

iVBORw0KGgoAAAANSUhEUgAAAHgAAABgCAYAAADW4bYkAAASd0lEQVR4Xu2dCXgUVbbH/9XVne4mAUJYwuIAsgiDjo5KEMKWsPjYQUTG94QnME9BlhF0UIgiCAg4DAiIjEF2cGEfUFCGsIgyKLjNhEWBRE1ITAIJ2Xurrn7vVOc2N0Ulqfjsb7qZyvf1V9W13L51fvd/zrmnKt2Cz+fzgftTvQX/nq3LssyfYqyHsAUEHjABpJcgCCCIbEn9p+20jR3DtoXwtRldA6AAVoMlyzCYVS150IYlQ9cCCmCmVl6ltE2SpIByvV4v6EXbtZRMajf+Qs8CgizLSgxmiuQhejweBSq9CLYWZHauATj04FKPFMC8IgkiA+t2u5V1gssv6RgaELQ0AIcmWNYrwev1BgAzuASUXg6HAwSZlvQiyC6XS3HRTOnqrDu0L/ffr3cBwMwNM4gEtrS0FNevX0d+fj5KSkqQmpqqrLNYzZT/72e20LhiPWGxEmCCSsollTqdThQUFODKlStIT09HcnIy2rdvj1GjRin7f+k/Nj37pdv9/7T3r+oTgfs5nlGrv4IkSYqLJrAEmOCVl5crLpngkmo3b96MVatWoUmTJsr+6jrAkjWTyXRTfGYjjnWeH4FVXZDWsdXNwbUKM1qQqxr9tJ3fx9bZNddkfGZk8oj8sey9urbA+qbVb/VUlB3DL9kxfB7FF6QUwCyJYvG2rKwMxcXFSEtLQ1JSEjZs2ICYmBgUFhYq/VGDUhtQPZKY0aoyHH++FmgecnUju6ZBwhtTCxzbT4NT6xqq8gZ8/9Rhiw9nDDiDogbFD1w1TPU+HiLbx382m84KbrdbAczUS66Z4BLMlJQUnDt3DvPnz8e1a9fAVEkn0zotRbMVHo8AiwXwSk4Fvs1mC0yreEXQOfSeLZkRa1KyHnf1c8DzwNSDrybAVSmZh8fgai3ZNtaOVuWQVzs/ONln8AOGr0/QsQy24HK5fJRYEWCCS+6ZAFMytWPHDjzwwAPo3LmzkmTxyqV1UbTi23NH0TuuHCe+sKDtrx9GpF3E2rWrkZCQgPbtWintsoEhiqLST7PZHGhLT6KgB3B1brumfYEpRUXsq0rdWm5aDZpXFq9eftbB1tXK412yljvWUjiDyUPl21UAM/VS3CXARUVFuHr1Knbt2oX4+HjExcVVAszctBjRAuc+7odxU9Zh+/pJ6B5/H774+iccPJaLgoJyPDVjKxpE2xSYTLkEm714l6gVi6rbVtvkqbobJH6gAkSLGZA88Fa6/eL/JHYNtMtiESF5JOUc5s3UxmeKYksGlS8kMZWxegLfRz3um/9Mdi5fm1C8kNPpVACzuS4BJvecl5enAO7du7cCmKZMvEstKvGhPOs59B+9ByZLLD47/Q1aSo/B13wtGjWPR9rp3+NS1r24654EyLIUgKoGzOKdFjC9yq0JNt+OZpuCALPJi7TTp+Hr0AXt6omQZP9Nl8rqBiyiG+mpuWj6m9thlSUif9MdN6ZEHjJfBeQrg9Q+Kxz9nNjMXw9z86w9ZWA6HA4FMHPPlGDR3JcpODExsRJgOkkUI5D5YypcWfNw94AUnL+Yj5KMpejf04a1B/rimWnj0DhiFWzRz+LCxQwUFeaD3LMfrgjRLMIsimQbyF4vRLNFWVLR1CTSRloxQaxIdnw+qn/7YBLNMNFuKrRIknIeBCjb6L1PECEKVGGT4YMAE30GfPDJXnhl/50yCCaYRTKqfx2yFz7BBKvFjU+2bIPUZwwSW9jgIcAATPDB45X951msiDZdwpi7luHZ1PVoK5VBMJv98Y76DxPgkyB5fRBMAmTyBnRnVZbg8kiVCkQUFtUunHe31SlYy1VXlXQpgNm8l9RLSqX5LwHes2cP+vTpEwAcSAh8FsTUuQih4FXUja6PnNwydOjUDkW56TiXNwit2vZGA+dz2LrXjSFjPoTbVeAHTDFYcpF1kXe9EB5fJNre3hxlpdcAWwzqWXwov1YI1G8Ak7sAGdn5sNePQX2bHZGRIvJ++hElDhH1YhqjaaMGKC7LgbdERkG5G83atoc1/zIuO6xo3awxbPAgN/sHXC+zoHHsrxBd1wfJC4hyOa4UimgRa4ezMBfuOk1QX/CguECCrY4XQmQ9yIXX4LWYkZ2dB1uzlmhVzw6zUI4LF39CZL0iLH/oPUz5/A10RCHOXkiHzyegXttOaCrlIMttR7MoKwp/ykFEo2YQPYXIKAGa2k0KZKYuVg5mVUGmZOZqmbfk3zOwLPni4z8PmG1XpmYMMIu/PODdu3ejf//+N8VgQTAjO/MsTn74LOY/3wkRFgEeUwwETwHsEV58cuY6esY3xs4PHOjUcw983iLF01nsdXH9zCY8P2YzpIfi4D70DzSd9SoecW7D5xGPYfHEDpg6ZSn6/e5hfLr6RVyMugPXMw8i5p5Z2LZgBHasfRlfpsm4mJOOhcmn8NGcWBy7HI/GEXnIEdugV8ciHPrSh6nzV+FeeTf+vP1z1HfZkNewHRbPfgoxAhDl/hi941Lx0bVpSGraBrlJn2FN5yOYtK0ZBp94BvJ7/8RtLw7CgvPt0arjRRzOi0fGoRew4+UZWH/WidiYi/jheDu8991mXFk4BtNOWxDX5BrSpR5Y94SEfoc7IeuFDujaojd6Hs3GxNTHMcU7Axv6N0Ohw19IIhhMwew9n4TVJsFSH6tOuioBJvesVjAPmE82Cq4X49u0K5g8aCt8XidEcr2iADHqNhRfzcCsxZnYfqAYX319FiXF/vkzAS48swXLl13GwpR1aJj6Ju74UyG+mt0AQzdfxP6JCXh9z6fo0UbCytReOLD8EXy56gls+EdrLPvzeCS/MhMb/3oSaY76eGvv35C2tAPyh57AK7/9FuOmLsKE9Slo8vZs7Lf0BN5/CiszWqFj3SKkOm/Dth3b0CNWhBgZhXeT+qHVqEmYtvxvmBb7H2jTKBmnRu/C3U/2hePtM4idMwSH4xZhzQt34IVfJaJT8hy8tPkYPktei+jSFDwcvw3z9j2ER6en4OiBlYg1S0h+ZjjSe8+E/dWP0HNWPRx49yjO3DMTQ4+8iRYv/wndGnnhcN+4I8diMgNLoKty0epkU+2+q1OybsB8kiWKZpy/lArRBFwvltD9jr/DZinC5R+zIEgleG1vIi5dOIX9722CxewvGlD8tdijUHhmKxasvIzXDq9H3Y+Xosd6F77e+t/444C5yG1ehObdFmFMoxWY+Ek8zqydgPcn9cB+8yMY++tMLD8Si0N7nsbT40ei4/hk/Li7ByJHnsR4+3HMeXMvpi1ah2urp+IjcyKiv1uGhlM/wZTuDQF3Ga5k58DhkWG118PBLbOwMvnveHHbWzh/ZAYOvXE/NmUuwNF774fw7heISRqMS2PWYNqwGLx1V180eH0+Fqx+Hyd3vgOc3IhHx6ZgxfGxGPf4Zqw/sAmdY2Qs+6/+yH1sC3p9NhJTjwzDX5YOx7kJo7A8fjIOJo2ExemAu+KWK6sc8ks+k65OwWr3zFy5eooVOK68vDyQRTMFU5KVm5uLvXv3VnLRTMHwAc1bN8GUSU9gyIjRuL3NbzFx8nTMiI/H7mOHMXBIIhxn/4mBS5cj0mxWAFMMttiiUPTNdswctxoZbRug0GVF0uJVGN+rI8pPvYDWD3+FEz8cRtv80xj3+9E4X9AEEY086Bc3Gc+M7YTpz81F+pVMXEo34Y0Tp3Fh3Z2o85/fYHJkCqa/9g6eW7ETBcsmYJdvCCZ2vYQxE1+Hr3FztEgYieXPT0W04IJgqYPiU2tw/9Of4swXb+Pg//TFiugnkb5tNNa0vBPmD75Dw+m9cf7xjZj1aEOsaHYfmn+cgTob++IP+0pxZws7rn7ZApsy34F3w3QkLDmBO5s64blvKvYtm4LiY4vQ74/HcPDzFOyY0BLHm8/DjqSBKC0th1Rxb51XL1vniyFaSZSebTzsQLyuCXC/fv3QpUuXStOkqKgojP7dKCxdNgd2MR9Z2fkYPXoU9h0/jYzpK/CbtUuwZMlqzJs9Gw2iowPTDVJwwemteHtnHv6wZh6iZBd8XgmmOtEof/9ZPHLuIXw48244XSIaNKwPqyUChxaNx5ase7HylbEQ3E4lUbJYzJBcTsBkhc/rggQBFlGER/JAMFsgQoZPMMNs8sErUQbtheyVIVc8X2gyW2CzinA53BAtERB9EhwuCSabDYLbBZkKMZIbXlmAaLUCHv9x1FeYqV0ZLocHpggrRFmC7BNgormx0wnZFAGbGSh3OCCINgheJ8qcTkjUDw4wuWSWYLHES6vMWZV7ZtvV83um/kBRpibAVcXg0lIXFi98EotniOiS2BxwOJGTF4Xthx14aXEausfdjZfmvASrzcoBrourn67F2i1ZmLlxCaKkMpgtNpza+yKmvn4Zez/YjtZ2L1ylaUieuhCpUTaU5kXiiUULkdjeDLfHPzelaZOfFU1kaPqjTEcDDwoqx9ywjLJW2e1R4UU5lc6+MY/1N3LjXL/LopOVNgKVPP+JlbbRMbSJ9YUBVENk23nAfJlRDUhLleq5PO+e+Wqjcm5tALOiBJ1ot9dFyqG3UN90GGXlFlz4XsK0sfWwdV8xdh6QsX/fTqVMSaOTlSgpdkN2we0WUKduHcUatM1RlINrpgZoE22FWyLjuVFwJRdlJiCybiyaNLTB4/YnIfyf1oUyEFoFjaqOZwNAbcybPpAbKPw+dS2duVs+M2aPPNF56gSLJVc8KK3PDtSXueIK32d1fFaqb7UBzBuPTrZY7JBhU3QkCDKcLh/q2E2wWYGioht3nvhSpSCYIIo37tbQqCfIImieSsUOKmj4iyKKyHz09Ij/OWweEKvaVAWBH8nqQaE1teAL+8zQ6jpzTcD54xkMvlTJwPMVLvZZWvNfXlCBmFoBV0vp6kFXKwWzLJo1whtEvc4fw7s2Bpotq1KklmG1FKl1PuuL2jhq46vd9k2urcKQbCDxg4JXLOsDUxLvDfjEiXfDDCZfP1YPSP56NZOnijIqPxi1BrJuBRNgdefVqlJ3in0gX2/WMk4gIah44F5rJFYFWEuNNblndWKihqgu+ldnbGYD/hrVMZHB5e3H3LKWMmsKFVpQqxqAtQZst9vRsmVLJa5qGVJtLLXi1YDVMUSPUqtyuertVblYrUHBDM7HMR5CVd5Gy22zbXwYUV9XdfvUwqnus9k1VmW3WgGm+7j0mjt3rlKvZslTdRcZDvu0vEo49FtPH2sFOCIiQrnTNHDgwMAz0Xo+xDjmX2eBWgOmpz2GDx+uFD6Mv9C3gG7A9MiO1WpVHucxAIc+2EDuU5t5sAE4fMD+LMAUg0nJhoLDB7RuF02umRRsAA4fuNRT3YAJrKHg8IJbK8CUNVssFkPBYcZYt4INwGFGtqK7tQJMLtqYJoUXaANwePGqdW8NwLU2WXidUCvARpIVXnBrnUUbMdgAHH4WuMV7XCsXbSg4/EaDATj8mNWqx7oBG6XKWtk1ZA42AIcMiuB0RDdgKlUaMTg4EILZqgE4mNYNgbYNwCEAIZhdMAAH07oh0LYBOAQgBLMLugCz/w+mWrRxuzCYOH75tnUDZs9kGYB/eQjBbFEXYPZFaMY0KZgogtO2LsDMRRNg+ppD47HZ4MAIRqsG4GBYNYTaNACHEIxgdEUXYPpKYXazwXDRwcAQvDYNwMGzbUi0rAswn2TRVw2PGDHC+PfRkMBXcyd0ASYXze4m0T+AG4BrNmyoHGEADhUSQeqHLsDdunVTSpTsKxwMBQeJRhCa1QW4a9euShZN/z5KLnrYsGGgLy41/kLfAroB8zHYABz6YFkPdQEmF83mwZRFDx061FBwmDDWBZh+WocA0+1Cw0WHCdmKbuoCTApmLpq+AM1w0eEDWRfg7t27BxRsAA4fuNTTWgFm06QhQ4YYMThMOOsC3KNHj0ox2AAcJnT1KpgBJgXTr5AaMfgWA9yzZ89KMdhQ8C0ImD10Rwo25sG3EGD6WZ1evXoFSpX0m4YG4FsMMP3ELKtkGYDDB66uaRIp2AAcXlD53tY4TWKAqZJFd5PoJ+8MFx0+wGsE/OCDD1aKwQbg8IGry0XTT9slJCQEkqycnBxDwWHEuEYFM8DsZgMp2JgHhw9hXYATExMrKdgAfAsCZgomF20AvsUA9+nTJzAPNgCHD1zdSVbfvn0DLjo7O9tQcBgxrjEG0zSJB5yVlWUAvlUB22w2ZGZmGtOkWw0wTZVYLZoUPHjwYOOJjjCBrMtFk5tmD76Tgg3AYUJXzxMdBHfAgAEBwBkZGRg0aJCh4DBhrEvBBuAwoanRTV2A6feCWQw2FBxesGsETAkWuWR2u/D77783YnAYMdYFmEqT7JksA3AY0f2/rv4vUC/Zt+yEWrkAAAAASUVORK5CYII=

这就是形象

为什么返回的图像被剪裁？

我正在尝试将图像转换为base64.我写了以下代码:

if (file)
{
    var reader = new FileReader();
    reader.onload = function(readerEvt)
    {
        alert(readerEvt.target.result);
        var image       = readerEvt.target.result;
        var base64image = image.split(',')[1];
        var key         = 'image'+i;
        images[key]     = image;
        //$('#image_preview').attr('src', readerEvt.target.result);
    };
    reader.readAsDataURL(file);
}

但是当我提醒readerEvt.target.result它时它会显示131494个字符但是当我将它加载到变量时只加载了10001个字符.这使得从base64解码后图像不完整.任何帮助将不胜感激.

我想将本地图像转换为base64。reader.readAsDataURL不起作用。我总是得到 rawImg 变量的未定义。文件 var 的值是我尝试上传的文件的元数据。

HTML：

<input
  type="file"
  accept="image/jpeg/*"
  @change="uploadImage()"
/>

JS：

uploadImage() {
  const file = document.querySelector('input[type=file]').files[0]
  const reader = new FileReader()

  const rawImg = reader.readAsDataURL(file)
  console.log(file)
  console.log(rawImg)
}