背景:
前の質問で説明したように、次の必要があります。 jQuery を使用して画像を取得し、その後の POST リクエストで使用できるように、それを Blob として保存します。ただし、jQuery の dataType は画像について明示的に言及していません。
問題:
CoffeeScript (およびそれに相当する JavaScript) の現在のコードは、jQuery.get() と、jQuery.get() を使用して画像を取得しようとします。それを FormData オブジェクトに Blob として保存します。ただし、このアプローチでは、データ型の不一致により画像が破損します。
質問:
jQuery の ajax メソッドを使用して画像を Blob として取得する実現可能な方法はありますか?
答え:
アプローチ 1: ネイティブ XMLHttpRequest を使用する
を使用して画像を BLOB として取得することはできません。 jQueryのajaxメソッド単体。ただし、ネイティブ XMLHttpRequest を利用することで解決策が得られます。 JavaScript スニペットは次のとおりです。
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ //this.response is what you're looking for handler(this.response); console.log(this.response, typeof this.response); var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(this.response); } } xhr.open('GET', 'http://jsfiddle.net/img/logo.png'); xhr.responseType = 'blob'; xhr.send();
このコードでは、XMLHttpRequest オブジェクトが作成され、その responseType は「blob」に設定されます。 onreadystatechange イベントは、応答を処理し、画像のオブジェクト URL を作成するために使用されます。
アプローチ 2: jQuery 3 を使用する
ただし、次の点については言及する価値があります。 jQuery バージョン 3 では、画像を BLOB として取得できるようになりました。 jQuery 3 を使用して修正された JavaScript スニペットを次に示します。
$.ajax({ url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e', cache: false, xhr:function(){// Seems like the only way to get access to the xhr object var xhr = new XMLHttpRequest(); xhr.responseType = 'blob' return xhr; }, success: function(data){ var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(data); }, error:function(){ } });
このスニペットでは、jQuery の xhr() 関数を使用して XMLHttpRequest オブジェクトへのアクセスを取得し、そのresponseType を「blob」に設定します。これにより、画像を Blob として取得し、必要に応じて使用できるようになります。
以上がjQuery の ajax メソッドを使用して画像を Blob として取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。