[英]How to wait for the multiple images to load in the canvas and convert to base64?
我正在嘗試在HTML5中獲得畫布的base64版本。
目前,我從畫布上獲得的base64圖像為空白。
我發現類似的問題,例如這個問題:
但是,我的問題是,因為我要在畫布中添加2張圖像,所以我無法使用這些答案中提供的示例,因為它們中的大多數都使用單個圖像。
我知道我必須等到畫布圖像正確加載后才能嘗試獲取base64圖像。 但是我不知道該怎么辦。
這是我的代碼:
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.canvas.width = 1000; context.canvas.height = 1000; var imageObj1 = new Image(); imageObj1.src = "http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg"; imageObj1.onload = function() { context.drawImage(imageObj1, 0, 180, canvas.width, canvas.height); }; var imageObj2 = new Image(); imageObj2.src = "http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg" imageObj2.onload = function() { context.drawImage(imageObj2, 0, 0, canvas.width, 180); }; // get png data url //var pngUrl = canvas.toDataURL(); var pngUrl = canvas.toDataURL('image/png'); // get jpeg data url var jpegUrl = canvas.toDataURL('image/jpeg'); $('#base').val(pngUrl);
<div class="contents" style="overflow-x:hidden; overflow-y:scroll;"> <div style="width:100%; height:90%;"> <canvas id="myCanvas" class="snap" style="width:100%; height:100%;" onclick="takephoto()"></canvas> </div> </div> <p> This is the base64 image </p> <textarea id="base"> </textarea>
這是可行的FIDDLE:
https://jsfiddle.net/3p3e6Ldu/1/
有人可以在這個問題上提出建議嗎?
提前致謝。
編輯:
如下面的注釋中所建議,我嘗試使用一個計數器,當計數器達到特定數字時,我將畫布轉換為base64。
像這樣: https : //jsfiddle.net/3p3e6Ldu/4/
在您的兩個示例(一個來自問題的示例和一個來自注釋的示例)中,命令的順序並沒有真正尊重手頭任務的異步性質。 在后面的示例中,應將if( count == 2 )
塊放入onload
回調中,以使其正常工作。
但是,即使那樣,您仍然會遇到下一個問題:您正在從不同的域加載圖像。 您仍然可以繪制它們(在畫布中或使用<img>
標記),但是您不能直接訪問它們的內容。 即使使用<canvas>
元素也不走彎路。
我將代碼更改為如果圖像托管在同一域上則可以運行。 我還使用了一個函數來加載圖像並承諾處理回調。 使用回調和計數變量的直接方法對我來說似乎容易出錯。 如果您查看相應的小提琴 ,您將注意到顯示的SecurityError
。 這是我提到的相同原產地政策的上述問題的結果。
我以前在類似方向上的問題是關於如何檢測,如果我在添加一些圖像后仍能讀取<canvas>
的內容。
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.canvas.width = 1000;
context.canvas.height = 1000;
// function to retrieve an image
function loadImage(url) {
return new Promise((fulfill, reject) => {
let imageObj = new Image();
imageObj.onload = () => fulfill(imageObj);
imageObj.src = url;
});
}
// get images
Promise.all([
loadImage("http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg"),
loadImage("http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg"),
])
.then((images) => {
// draw images to canvas
context.drawImage(images[0], 0, 180, canvas.width, canvas.height);
context.drawImage(images[1], 0, 0, canvas.width, 180);
// export to png/jpg
const pngUrl = canvas.toDataURL('image/png');
const jpegUrl = canvas.toDataURL('image/jpeg');
// show in textarea
$('#base').val(pngUrl);
})
.catch( (e) => alert(e) );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.