Javascript 从HTML元素获取图像数据

我在这里遇到了一些问题，这些问题为我目前遇到的问题提供了一些提示，但似乎没有一个真正符合要求

我目前正在使用angular模块ngcrapper（），该模块可以轻松处理来自文件输入的图像，但我还需要它处理外部URL。为了处理外部URL，我使用了faheyy（）给出的建议，但现在我正在处理CORS问题，我无法更改服务器

因此，我想在一个隐藏的HTML元素上加载一个图像，然后以某种方式提取数据，将其编码为Base64，然后我就可以在裁剪器模块上使用它，而无需创建新的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,/, "");
          }
        }
    };
});

该指令仍在使用中，但我遇到了canvas.getContext（“2d”）行的问题（它抛出未定义的）

到目前为止，我在这里找到的线程/答案已经处理了作为Base64传递的图像src，但是我还需要它来处理URL，我无法越过这个问题。 谁能给我指一下正确的方向吗？

---

谢谢

您应该使用：element.find（“#cropCanvas”）。似乎element.sides不存在HTML5规范在任何外部图像内容上都有一个“isDirty”标志，所以即使你把它放到画布上，如果它能被检索到，我也会感到惊讶。托尼：它仍然在抛出未定义的错误。卢克：你对如何处理这个案子有什么建议吗？试试看：@HaNdTriX：我想我能用你给我的建议解决我的问题。一开始我遇到了一些问题，因为我想从Amazon的S3存储桶中读取图像，但是它们没有可用的CORS配置，但现在可以正常工作了。特别是对于ng cropper模块，我必须对数据进行更多的操作，但我想我现在已经可以工作了。谢谢你的建议。