Question

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

我目前正在使用角度模块ngCropper（https://github.com/koorgoo/ngCropper），它可以轻松处理来自文件输入的图像，但我还需要它来处理外部URL。为了使用外部网址，我使用了 faheyyy （https://github.com/koorgoo/ngCropper/issues/3）提出的建议，但现在我处理了CORS问题，我无法做到这一点服务器更改。

所以，我想在隐藏的HTML元素上加载图像并以某种方式获取数据，将其编码为Base64，然后我就可以在cropper模块上使用它而无需创建新的GET请求（会产生CORS问题）。我还尝试创建一个读取图像源的指令（该指令插入 img 元素）并尝试将其放在canvas元素上，然后获取dataURL：< / p>

.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,/, "");
          }
        }
    };
});

该指令仍然有效，但我遇到了 canvas.getContext（＆＃34; 2d＆＃34;）行的问题（它抛出 undefined < / em>的）。

到目前为止，我在这里找到的线程/答案已经处理了作为Base64传递的图像 src ，但我还需要它来处理URL，我无法移动过去这个。请有人，请指出我正确的方向？谢谢

从HTML元素获取图像数据

0 个答案: