[英]Resizing an image in canvas
我一直在嘗試獲取頁面上已經存在的圖像,並將其源更改為通過FileReader api加載的其他圖像的URL。 結果是空白圖像,白色,盡管尺寸看起來還可以。 ShowImage()放置一個用於裁剪的框-另一個div,然后加載文件,然后調用resize()。 如何獲得實際顯示的圖像? 任何想法將不勝感激。
function showImage(files) {
var buttons = document.querySelectorAll("button");
buttons[buttons.length - 1].style.display = "none";
var target = document.querySelectorAll("img");
target = target[target.length - 1];
target.className = "";
target.onload = function() {
var rect = target.getBoundingClientRect();
var position = {
top: rect.top + window.pageYOffset,
left: rect.left + window.pageXOffset
}; // center cropping box in image
box.style.top = (position.top + rect.height/2 - parseInt(box.style.height)/2) + "px";
box.style.left = (position.left + rect.width/2 - parseInt(box.style.width)/2) + "px";
}
var fr = new FileReader();
fr.onload = function(e) {
target.src = this.result;
resize();
};
fr.readAsDataURL(files[0]);
}
function resize() {
var orgImg = document.querySelectorAll("img");
orgImg = orgImg[orgImg.length - 1];
var canvas1 = document.createElement("canvas");
canvas1.width = orgImg.width/2;
canvas1.height = orgImg.height/2;
var ctx1 = canvas1.getContext("2d");
ctx1.drawImage(orgImg, 0, 0, orgImg.width/2, orgImg.height/2);
orgImg.src = canvas1.toDataURL("image/png");
}
更新
盡管應該在本地加載,但是不確定它是否可以用作小提琴。
您的代碼中充滿了錯誤,這是它不起作用的原因之一。
糾正錯誤后,您對圖像加載和文件加載事件的響應方式存在邏輯缺陷。
將target
重命名為image
您的文件閱讀器將加載圖像文件,然后將image.src
設置為已加載的dataURL。 然后,您調用resize,但是圖像尚未加載,設置src開始加載。
var fr = new FileReader();
fr.onload = function(e) {
image.src = this.result;
resize();
};
fr.readAsDataURL(files[0]);
調整大小必須在image.onload但你的設置image.src
您用來縮小圖像尺寸的畫布內容。 這將再次觸發image.onload事件,該事件將調用resize事件。
因此,要解決此問題,請在文件讀取器onload上移除resize
,然后將其放在加載功能的image
末尾(即target
)。 但是在調用該調整大小之前,請從映像中刪除onload事件,以使其再次停止觸發。
您的代碼應該看起來更像
// refactored target to image
src.addEventListener("change",showImage); // Add event listener here not in HTML
function showImage() {
src.style.display = "none"; // hide the input
const image = document.querySelectorAll("img").pop(); // get the image from the page
image.onload = function() { // set the onload event
const rect = this.getBoundingClientRect();
const pos = {
top: rect.top + pageYOffset,
left: rect.left + pageXOffset
};
const boxSize = box.getBoundingClientRect();
box.style.top = ((pos.top + rect.height / 2 - boxSize.height / 2) | 0) + "px";
box.style.left = ((pos.left + rect.width / 2 - boxSize.width / 2) | 0) + "px";
this.onload = undefined; // remove onload event to stop it firing again
resize(this);
}
const fr = new FileReader();
fr.onload = function(e) { image.src = this.result }
fr.readAsDataURL(this.files[0]);
}
function resize(image) {
const canvas = document.createElement("canvas");
const w = canvas.width = (image.width / 2) | 0;
const h = canvas.height = (image.height / 2) | 0;
canvas.getContext("2d").drawImage(image, 0, 0, w, h);
image.src = canvas.toDataURL(); // "image/png" is the default so not needed as argument
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.