javascript - 图像的访问控制允许来源问题
问题描述
我正在尝试使用函数从不同的 url 添加图像,但我遇到了 cors 的问题,说我的请求被阻止了。
我尝试向图像添加 cossOrigin 属性,但它似乎仍然有效
function getDataUri(url, callback) {
var image = new Image();
image.crossOrigin = "Anonymous"
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
canvas.getContext('2d').drawImage(this, 0, 0);
// Get raw image data
// callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
// ... or get as Data URI
callback(canvas.toDataURL('image/png'));
};
image.src = url;
}
getDataUri(imageurl, function (dataURI) {
})
CORS 策略已阻止从源“ http://localhost:8000 ”访问“imageurl”处的图像:请求的资源上不存在“Access-Control-Allow-Origin”标头。
解决方案
我总是这样做: image.setAttribute('crossOrigin', '');
推荐阅读
- javascript - 在异步存储中多次保存具有相同属性的值
- python-3.x - What does **{'xerr':cv_std} mean?
- java - Gson's RuntimeTypeAdapterFactory isn't serializing the type
- android - Picasso 在将图像 URL 加载到 ImageView 时返回错误
- android - Wait until Kotlin coroutine finishes in onCreateView()
- sql - Querying the same table in the where clause
- c++ - Custom sorting C++ list
- python - Changed/stored pixel value won't brighten output image (using PIL import with grok learning python hw)?
- html - 带有溢出和引导导航栏的 Flex 在 Firefox/Chrome/Safari 中的表现不同
- python - Handling exceptions assert to NumPy testing in Python