[英]Resizing a image with Javascript without rendering a canvas on the DOM
我在其他許多人中看到了這個有趣的線程: 在不使用畫布的情況下在JavaScript中調整Base-64圖像的大小
但是,當我使用創建一個屏幕外畫布
const canvas = document.createElement('canvas');
結果圖像是透明的,大小甚至不匹配參數。 如果我在DOM的畫布上畫一切都很好
const canvas = document.getElementById('canvas');
這是我的調整大小功能,保持輸入圖像比例:
resizeImage(file) {
const canvas = document.createElement('canvas');
// const canvas = document.getElementById('canvas');
const context = (<HTMLCanvasElement>canvas).getContext('2d');
// set maximum width and height of output image
const maxW = 400;
const maxH = 400;
const img = new Image;
img.onload = function () {
const iw = img.width;
const ih = img.height;
const scale = Math.min((maxW / iw), (maxH / ih));
const iwScaled = iw * scale;
const ihScaled = ih * scale;
console.log(iwScaled + ' ' + ihScaled);
(<HTMLCanvasElement>canvas).width = iwScaled;
(<HTMLCanvasElement>canvas).height = ihScaled;
context.drawImage(img, 0, 0, iwScaled, ihScaled);
}
img.src = URL.createObjectURL(file);
// retrieve output img in base64 format
console.log((<HTMLCanvasElement>canvas).toDataURL());
}
它從HTML輸入中獲取文件(File)作為參數。 任何幫助將不勝感激,謝謝。
加載完成后,您將獲得Base-64圖像。
function resizeImage(file) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var maxW = 400; var maxH = 400; var img = document.createElement('img'); img.onload = function() { var iw = img.width; var ih = img.height; var scale = Math.min((maxW / iw), (maxH / ih)); var iwScaled = iw * scale; var ihScaled = ih * scale; canvas.width = iwScaled; canvas.height = ihScaled; context.drawImage(img, 0, 0, iwScaled, ihScaled); console.log(canvas.toDataURL()); document.body.innerHTML+=canvas.toDataURL(); } img.src = URL.createObjectURL(file); } document.getElementById("file").addEventListener("change", function() { file = file.files[0]; if (file) { resizeImage(file); } });
<input id="file" type="file">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.