Access-Control-Allow-Origin'标头出现在请求的资源问题上

时间:2016-12-27 11:08:19

标签: javascript angularjs image cors

我有一个启用了CORS的图像服务器。当我在html页面中使用图像url时这样

<img data-ng-src="{{::result.image}}" />

它工作正常,图像显示在html页面中。

但是当我想将图片从网址转换为base 64时,它会给我这个错误。

Image from origin 'https://myimageserver.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.

我在javascript端使用的代码是这个

convertImgToBase64( $scope.result .tripImage, function(map_image){
                        setTimeout(function(){
                            $scope.result.image= map_image;
                            $scope.$apply();
                        });
                    });

    function convertImgToBase64(url, callback, outputFormat) {
                var canvas = document.createElement('CANVAS');
                var ctx = canvas.getContext('2d');
                var img = new Image;
                img.crossOrigin = 'Anonymous';

                img.onload = function() {
                    canvas.height = this.height;
                    canvas.width = this.width;
                    ctx.drawImage(img, 0, 0);
                    var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                    callback.call(this, dataURL);
                    canvas = null;
                };
                img.src = url;
            }

如果有任何人在javascript方面遇到与CORS相同的问题,请帮忙

0 个答案:

没有答案