JavaScript：如何將jpeg圖像標簽轉換為原始二進制文件？

Question

這是我嘗試過的部分代碼；

<img src= "hello.jpg">
var binary = atob(base64.replace(/\s/g, ''));
console.log(binary);

但是它沒有按預期工作。 如何將標簽轉換為二進制文件

是否有其他方法可以將圖像標簽轉換為二進制？

Answer 1

您可以使用HTML5畫布或使用FileReader（），這是兩者的示例：

 function convertImgToDataURLviaCanvas(url, callback, outputFormat) { var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = this.height; canvas.width = this.width; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); canvas = null; }; img.src = url; } function convertFileToDataURLviaFileReader(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); } $('#img2b64').submit(function(event) { var imageUrl = $(this).find('[name=url]').val(); var convertType = $(this).find('[name=convertType]').val(); var convertFunction = convertType === 'FileReader' ? convertFileToDataURLviaFileReader : convertImgToDataURLviaCanvas; convertFunction(imageUrl, function(base64Img) { $('.output') .find('.textbox') .val(base64Img) .end() .find('.link') .attr('href', base64Img) .text(base64Img) .end() .find('.img') .attr('src', base64Img) .end() .find('.size') .text(base64Img.length) .end() .find('.convertType') .text(convertType) .end() .show() }); event.preventDefault(); }); 

 @import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); body { padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <form class="form-horizontal" id="img2b64"> <h2>Input</h2> <div class="form-group"> <label class="col-sm-2 control-label">Convert via:</label> <div class="col-sm-10"> <select class="form-control" name="convertType"> <option value="Canvas" selected>Canvas</option> <option value="FileReader">FileReader</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">URL:</label> <div class="col-sm-10"> <input type="url" name="url" class="form-control" placeholder="Insert an IMAGE-URL" value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" required /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" class="btn btn-default"> </div> </div> </form> <div class="output form-horizontal" style="display: none"> <hr> <h2>Output</h2> <div> <strong class="col-sm-2 text-right">Converted via:</strong> <div class="col-sm-10"> <span class="convertType"></span> </div> </div> <div> <strong class="col-sm-2 text-right">Size:</strong> <div class="col-sm-10"> <span class="size"></span> </div> </div> <div> <strong class="col-sm-2 text-right">Text:</strong> <div class="col-sm-10"> <textarea class="form-control textbox"></textarea> </div> </div> <div> <strong class="col-sm-2 text-right">Link:</strong> <div class="col-sm-10"> <a href="#" class="link"></a> </div> </div> <div> <strong class="col-sm-2 text-right">Image:</strong> <div class="col-sm-10"> <img class="img"> </div> </div> </div>