[英]Download and convert image based on img src path to File object or Blob in JavaScript
假設我的頁面中有一個圖像標簽：
<img src="https://i.picsum.photos/id/949/200/300.jpg" alt="foo" />
如何在沒有 CORS 問題的情況下下載該圖像並在 vanilla JavaScript 中轉換 File 對象或二進制文件？
您可以轉換為 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) {
});
我希望上面的代碼對你有用。
如何使用圖像 JavaScript 文件 Object 作為圖像 src (<img> )
[英]How to use an image JavaScript File Object as an image src (<img />)
如何在 img src 中指定圖像本地路徑以在 react/JavaScript 中加載
[英]How to specify image local path in img src to load in react/JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.