Javascript AngularJS从URL保存和显示图像

我希望在angularJS中创建一个简单的函数，以便从URL读取图像。简单地说，我把图像URL，它将该URL的图像转换为base64，并保存到DB，以及它显示到该图像画布上的图像。我希望阅读所有类型的图像，而不考虑仅PNG

我尝试过一些逻辑，从谷歌上我发现代码首先是画布的维度

$scope.convertBase64 = function () {
            console.log("Firing Function");
            var canvas = $scope.imageURL;
            canvas.width =  $scope.imageURL.width;
            canvas.height =  $scope.imageURL.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage($scope.imageURL, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            $scope.imageURLBase =  dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
            return $scope.imageURLBase;
        };

---

同时，我希望保存图像的base64内容。无论画布大小如何，如何使用ng source或其他工具随时使用base64内容进行渲染。

@RachelGallen-但我希望对图像内容进行编码这可能吗？您共享的链接正在将简单文本转换为base64。您删除了注释？若要将图像转换为base64：警告，如果图像违反跨源安全规则，代码可能会失败。您必须在toDataURL周围放置一个try catch，或者检查它是否是跨源的。如果是跨原点，除非在浏览器上打开安全设置，否则此功能将不起作用。此外，就内存而言，BASE64是一种非常浪费的格式。Javascript字符串为16位，在BASE64中仅使用其中的6位。按原样将图像上载到服务器，并将图像本地URL存储在数据库中，而不是数据URL。这将节省您和您的客户的时间。@RachelGallen-但我希望对图像内容进行编码，这可能吗？您共享的链接正在将简单文本转换为base64。您删除了注释？若要将图像转换为base64：警告，如果图像违反跨源安全规则，代码可能会失败。您必须在toDataURL周围放置一个try catch，或者检查它是否是跨源的。如果是跨原点，除非在浏览器上打开安全设置，否则此功能将不起作用。此外，就内存而言，BASE64是一种非常浪费的格式。Javascript字符串为16位，在BASE64中仅使用其中的6位。按原样将图像上载到服务器，并将图像本地URL存储在数据库中，而不是数据URL，这样可以节省您和您的客户端的时间。