Question

我有一个要求，用户将上传他们的图像，我必须将其转换为某些内容并将其发送到.Net REStful服务。我是棱角分明的新手。请有人帮忙

Answer 1

从这里回答https://stackoverflow.com/a/24880314/625189

我建议你使用   https://github.com/ninjatronic/angular-base64。

按照使用此库的说明后，您可以简单地进行操作   拨打：
var imageData=$base64.encode(image);
别忘了注入你的模块：
.module('myApp', ['base64'])

Answer 2

您可以使用angular custom指令转换图像base64。 directive.js

myApp.directive('imgUpload', ['$rootScope',function (rootScope) {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      var canvas = document.createElement("canvas");
      var extensions = 'jpeg ,jpg, png, gif';
      elem.on('change', function () {
      reader.readAsDataURL(elem[0].files[0]);
      var filename = elem[0].files[0].name;

        var extensionlist = filename.split('.');
        var extension =extensionlist[extensionlist.length - 1];
            if(extensions.indexOf(extension) == -1){
                alert("File extension , Only 'jpeg', 'jpg', 'png', 'gif', 'bmp' are allowed.");       

            }else{
                    scope.file = elem[0].files[0];
                    scope.imageName = filename;
                }
      });

            var reader = new FileReader();
            reader.onload = function (e) {

              scope.image = e.target.result;
              scope.$apply();

            }
        }
    }
}]);

HTML：

<div class="input-group">
  <input id="image" class="hidden" type="file" img-upload ng-model="imageName" name="imageName">
  <img ng-src="{{image}}" height="100" width="100" ng-show="image"/>
  <label for="image" class="btn btn-success btn-xs pull-center" name="upload" Value="">Upload Photo</label>
</div>

现在您需要在控制器中添加代码，该代码适用于在数据库中存储图像或文件。

Answer 3

如果您的图片数据已在base64中，请尝试

<img alt="{{p.alt}}" data-ng-src="{{'data:image/png;base64,'+p.Photo}}" class="photo" />

Answer 4

在Angularjs中以64位上传图像的代码

Html代码

init(loginViewModel : LoginViewModel) {
        super.init(nibName: nil, bundle: nil)
        initWithModel:(loginViewModel: LoginViewModel)
    }

角度代码：

    08-29 14:21:03.962 5343-5343/com.knowledgecity.us_site I/MultiDex: VM with version 2.1.0 has multidex support
08-29 14:21:03.962 5343-5343/com.knowledgecity.us_site I/MultiDex: Installing application
08-29 14:21:03.962 5343-5343/com.knowledgecity.us_site I/MultiDex: VM has multidex support, MultiDex support library is disabled.
08-29 14:21:04.058 5343-5343/com.knowledgecity.us_site I/InstantRun: starting instant run server: is main process
08-29 14:21:04.067 5343-5343/com.knowledgecity.us_site I/MultiDex: Installing application
08-29 14:21:04.067 5343-5343/com.knowledgecity.us_site I/MultiDex: VM has multidex support, MultiDex support library is disabled.
08-29 14:21:04.361 5343-5343/com.knowledgecity.us_site W/art: Before Android 4.1, method android.graphics.PorterDuffColorFilter android.support.graphics.drawable.VectorDrawableCompat.updateTintFilter(android.graphics.PorterDuffColorFilter, android.content.res.ColorStateList, android.graphics.PorterDuff$Mode) would have incorrectly overridden the package-private method in android.graphics.drawable.Drawable
08-29 14:21:04.420 5343-5355/com.knowledgecity.us_site I/art: Background sticky concurrent mark sweep GC freed 4119(386KB) AllocSpace objects, 4(64KB) LOS objects, 1% free, 2MB/2MB, paused 747us total 101.676ms
08-29 14:21:04.567 5343-5355/com.knowledgecity.us_site W/art: Suspending all threads took: 10.350ms
08-29 14:21:04.568 5343-5355/com.knowledgecity.us_site I/art: Background sticky concurrent mark sweep GC freed 71(34KB) AllocSpace objects, 0(0B) LOS objects, 0% free, 3MB/3MB, paused 10.906ms total 39.420ms
08-29 14:21:04.583 5343-5343/com.knowledgecity.us_site I/AppCompatViewInflater: app:theme is now deprecated. Please move to using android:theme instead.
08-29 14:21:04.708 5343-5355/com.knowledgecity.us_site W/art: Suspending all threads took: 8.592ms
08-29 14:21:04.709 5343-5355/com.knowledgecity.us_site I/art: Background partial concurrent mark sweep GC freed 238(16KB) AllocSpace objects, 0(0B) LOS objects, 36% free, 6MB/10MB, paused 9.362ms total 21.672ms
08-29 14:21:04.760 5343-5404/com.knowledgecity.us_site D/OpenGLRenderer: Use EGL_SWAP_BEHAVIOR_PRESERVED: true

                                                                         [ 08-29 14:21:04.761  5343: 5343 D/         ]
                                                                         HostConnection::get() New Host Connection established 0xa3c490b0, tid 5343


                                                                         [ 08-29 14:21:04.763  5343: 5343 W/         ]
                                                                         Unrecognized GLES max version string in extensions: ANDROID_EMU_CHECKSUM_HELPER_v1 
08-29 14:21:04.764 5343-5343/com.knowledgecity.us_site D/Atlas: Validating map...
08-29 14:21:04.793 5343-5404/com.knowledgecity.us_site I/OpenGLRenderer: Initialized EGL, version 1.4
08-29 14:21:04.793 5343-5404/com.knowledgecity.us_site W/OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without...
08-29 14:21:04.799 5343-5404/com.knowledgecity.us_site D/EGL_emulation: eglCreateContext: 0xa3c21700: maj 2 min 0 rcv 2
08-29 14:21:04.945 5343-5404/com.knowledgecity.us_site D/EGL_emulation: eglMakeCurrent: 0xa3c21700: ver 2 0
08-29 14:21:04.957 5343-5404/com.knowledgecity.us_site D/OpenGLRenderer: Enabling debug mode 0
08-29 14:21:05.067 5343-5404/com.knowledgecity.us_site D/EGL_emulation: eglMakeCurrent: 0xa3c21700: ver 2 0
08-29 14:21:05.128 5343-5343/com.knowledgecity.us_site W/art: Before Android 4.1, method int android.support.v7.widget.ListViewCompat.lookForSelectablePosition(int, boolean) would have incorrectly overridden the package-private method in android.widget.ListView
08-29 14:21:05.192 5343-5380/com.knowledgecity.us_site A/libc: Fatal signal 4 (SIGILL), code 2, fault addr 0xb72085ce in tid 5380 (Queue)

了解更多链接： http://vikasbishtangular.blogspot.in/2017/04/code-to-upload-image-in-64-bit-in.html

在angularjs中将图像转换为base64

4 个答案: