如何在javascript中获取文件api图片大小？

我：如何在javascript中获取文件api图片大小？

if(window.FileReader) { 
    reader = new FileReader(); 
    var sendingcontext = sendingcanvas.getContext('2d'); 
    reader.onload = (function(theFile) { 
    var image = new Image(); 
    image.src = theFile.target.result; 

    image.onload = function() { 
    sendingcanvas.width=this.width; 
    sendingcanvas.height= this.height; 
    console.log("height: " + sendingcanvas.height + " width: " + sendingcanvas.width) 
     sendingcontext.drawImage(image, 0,0); 
    }; 
     }); 
     reader.onloadend = function(e){ 
     showUploadedItem(e.target.result, file.fileName); 
    } 
    reader.readAsDataURL(file); 
    alert(sendingcanvas.toDataURL()); 
}

我想我不必解释代码做什么，但我要的是获取文件API图像的高度和宽度，将其设置为sendingcanvas并将其发送到服务器使用ajax通过使用它toDataURL()。我知道这很奇怪，但如果我从我的脚本中删除alert(sendingcanvas.toDataURL())我的服务器收到一个空的图像，但如果我在我的脚本中有它在我的服务器中，图像正是客户端拥有它的方式。

谢谢你的一切。

来源

2016-09-21 Mr.Cup

您真的确定要转换图像与一个PNG质量+元信息损失？ – Endless

你可以尝试让在<img>标签的图像和获取图像的实际宽度和大小的情况下，你有一个DOM什么：

var height = $("#main-reference").get(0).naturalWidth; 
 
var width = $("#main-reference").get(0).naturalHeight;

这个属性给你真正的高度和宽度的IMG虽然你已经打破了IMG与CSS

来源

2016-09-21 19:24:11

感谢您的建议但是你知道是什么导致我的问题吗？ –

只是想指出，你正在上传的图像正在转换为PNG（如果这是你想要的）
上传的文件不再一样选择

者均基于用户，发送一个blob是更好然后上传一个base64字符串，它是〜3倍大，你可以使用这个polyfill在旧的浏览器以获取canvas.toBlob(...)支持

这是basicly你在做什么：

function showUploadedItem(image){ 
 
    document.body.appendChild(image) 
 
} 
 

 
// Simulate a file (image) 
 
var black_1x1 = new Uint8Array([71,73,70,56,57,97,1,0,1,0,128,0,0,5,4,4,0,0,0,44,0,0,0,0,1,0,1,0,0,2,2,68,1,0,59]) 
 
var file = new Blob([black_1x1], {type:"image/gif"}) 
 

 
console.log(file) 
 

 
var img = new Image 
 
img.onload = function() { 
 
    console.log("height: " + this.height + " width: " + this.width) 
 

 
    var canvas = document.createElement('canvas') 
 
    var ctx = canvas.getContext('2d') 
 
    canvas.width = this.width 
 
    canvas.height = this.height 
 
    showUploadedItem(this) 
 
    ctx.drawImage(this, 0, 0) 
 
    canvas.toBlob(function(blob){ 
 
    console.log(blob) 
 
    // Send the canvas pic to server (using fetch, xhr or jQuery 
 
    // With or without FormData 
 
    // fetch('/upload', {method: 'post', body: blob}) 
 
    }) 
 
} 
 
// No need to use fileReader + base64 
 
img.src = URL.createObjectURL(file)

/* Just to make the pixel more vissible */ 
 
body img { 
 
    width: 10px 
 
}

<!-- toBlob polyfill --> 
 
<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>

来源

2016-09-22 19:54:35 Endless

如何在javascript中获取文件api图片大小？

回答

相关问题