假设我的页面中有一个图像标签：
<img src="https://i.picsum.photos/id/949/200/300.jpg" alt="foo" />
- src 路径是绝对路径地址，而不是数据 URI
- src 路径可能来自其他站点 (CORS(
如何在没有 CORS 问题的情况下下载该图像并在原版 JavaScript 中转换文件对象或二进制文件？
你可以转换为base64
或使用blob
jQuery.ajax({
url: 'https://i.picsum.photos/id/949/200/300.jpg',
xhrFields:{
responseType: 'blob'
},
success: function(data){
var blobData = data;
var url = window.URL || window.webkitURL;
var src = url.createObjectURL(data);
$('#img').attr("src", src);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<img id='img'>
</body>请尝试以下代码将图像源路径转换为文件对象：
function getDataUri(url, callback)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
canvas.getContext('2d').drawImage(this, 0, 0);
callback(canvas.toDataURL('image/png').replace(/^data:image/(png|jpg);base64,/, ''));
callback(canvas.toDataURL('image/png'));
};
image.src = url;
}
getDataUri('/logo.png', function(dataUri) {
});
我希望上面的代码对您有用。
我认为你的问题的答案就在这里。
通过传递URL通过javascript读取/处理图像 - 类似于PHP中的file_get_contents？