[英]How to convert array of images in array of base64 in a loopv?
我有一個存儲在服務器上的圖像array
,我想要所有圖像的base64
數據。
我嘗試過的
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
return canvas.toDataURL("image/png");
}
var images = ['images/1.png', 'images/2.png', 'images/3.png', 'images/4.png', 'images/5.png'];
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i];
img.onload = function() {
var newData = getBase64Image(img);
document.body.innerHTML += "<img src='" + newData + "'>";
}
}
我知道onload
事件稍后會在圖像加載后觸發,但無法找出解決方案。
看一下3點(幾個月前使用img.onload令人頭疼):
首先要確保onload可以工作。在分配事件后,應將src設置為圖像
第二-您必須將random get參數添加到圖像路徑。 就像是
img.src =圖片[i] +'?' + Date.now();
第三點-如果這樣做無濟於事,請嘗試將原始圖像插入瀏覽器(以確保瀏覽器會加載它)
由於onload
事件本質上是同步的( 一旦圖像被加載/緩存,就會調用處理程序 ),因此需要使用closure
來訪問current(in a loop)
圖像。
function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); return canvas.toDataURL("image/png"); } var images = ['images/1.png', 'images/2.png', 'images/3.png', 'images/4.png', 'images/5.png']; var tpArray = []; for (var i = 0; i < images.length; i++) { var img = new Image(); (function(img) { img.onload = function() { document.body.innerHTML += '<img src="' + getBase64Image(img) + '">'; }; })(img); img.src = images[i]; }
如果要保持陣列中圖像的順序,則在onload-handler
中將需要callback
,以確保一旦處理了當前圖像,就將訪問陣列中的下一個index
。
function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); return canvas.toDataURL("image/png"); } var images = ['images/1.png', 'images/2.png', 'images/3.png', 'images/4.png', 'images/5.png']; function getBaseInOrder(array, callback) { var index = 0; var resArr = []; var getBaseOfImg = function(imgSrc) { var img = new Image(); img.src = imgSrc; img.onload = (function(img) { return function() { var newData = getBase64Image(img); document.body.innerHTML += "<img src='" + newData + "' data-src='" + img.src + "'>"; resArr.push(newData); ++index; if (index == array.length) { callback(resArr); } else { getBaseOfImg(array[index]); } } })(img); }; getBaseOfImg(array[index]); } getBaseInOrder(images, function(baseData) { console.log(baseData); });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.