私はsamsung tizen tvのアプリケーションを作成するために取り組んでいます。 私のアプリケーションでは、ライブURLから画像を表示します。 1つの画面には、多くの画像(aprrox。150)と各画像のサイズ(約1 MB)が高く、解像度(1920 x 1080)が高くなります。 画像のサイズと解像度のため、アイテム間のナビゲーションが遅くなります。 jqueryを使用してイメージのサイズを縮小したいと考えています。 URLから画像をダウンロードし、サーバーサイドスクリプトを使用せずにjqueryを使用して物理的にサイズを変更することはできますか?それはサムスンのテレビ用のアプリケーションで可能ですが、ブラウザでは、あなたがこのキャンバスachiveことができるかどうサーバーサイドスクリプトを使用せずにjqueryを使用して画像サイズを変更
0
A
答えて
1
わからない
(下の例では、元の画像のサイズ(baseImg)は二回減少します)のみリサイズ画像jQueryとディスプレイを使用しないと、元の画像が表示されない
$(document).ready(function() {
var baseImg = $('#base')[0],
outImg = $('#result-image'),
canvas, context;
canvas = document.createElement('canvas');
// set canvas size to the size of original image
canvas.width = baseImg.width;
canvas.height = baseImg.height;
context = canvas.getContext('2d');
context.drawImage(baseImg, 0, 0, baseImg.width/2, baseImg.height/2);
outImg.attr('src', canvas.toDataURL());
});
そしてもう一つの例
あなたのサイズを言うとき0<img id="result-image" />
var baseImg = new Image(),
outImg = document.getElementById('result-image'),
canvas, context;
baseImg.onload = function() {
canvas = document.createElement('canvas');
// set canvas size to the size of original image
canvas.width = baseImg.width;
canvas.height = baseImg.height;
context = canvas.getContext('2d');
context.drawImage(baseImg, 0, 0, baseImg.width/2, baseImg.height/2);
outImg.src = canvas.toDataURL();
};
// not requires in your case,it just allows to use toDataURL() for image loaded from another domain
baseImg.crossOrigin = "Anonymous";
baseImg.src = "https://pp.vk.me/c626925/v626925429/26d09/KaotJEBjASw.jpg";
+1
あなたのコードを詳しく説明できますか? $( '#base')と '.resize1'とは何ですか? –
関連する問題
- 1. onmouseoverを使用してwp_get_attachment_imageを使用して画像サイズを変更する
- 2. JavaScript/jQueryを使用して画像のサイズを変更してください
- 3. jqueryを使用してangular2の画像のサイズを変更します。
- 4. codeigniterでgd2を使用して画像のサイズを変更
- 5. libpngを使用して画像のサイズを変更(双三方)
- 6. WriteableBitmapを使用してSilverlight 3で画像のサイズを変更
- 7. ImageMagickを使用してバッチスクリプトで画像のサイズを変更
- 8. drawInRectを使用して画像のサイズを変更するメモリ
- 9. jQueryを使用せずにJavaScriptを使用してドロップシャドウを変更する
- 10. jqueryを使用して画像のプロパティを変更します。
- 11. jQueryを使用して画像を変更しますか?
- 12. JLabelを使わずに画像をサイズ変更
- 13. JQueryを使用して背景画像を変更する
- 14. は、PHPを使用して画像のサイズを変更できません
- 15. JavaScriptを使用して画像サイズを変更してディスクに保存する
- 16. C#を使用した画像のサイズ変更
- 17. PHPを使用した画像のサイズ変更
- 18. アルファチャンネルを使用した画像のサイズ変更
- 19. Drupal - アコーデオン/トグルエフェクトと画像のサイズ変更を使用したニュース
- 20. Carrierwaveを使用した画像のサイズ変更
- 21. CSSを使用した画像のサイズ変更とトリミング
- 22. ピカソを使用して画像のサイズを変更し、HttpPostに追加
- 23. file_columnを使用した画像のサイズ変更 - Railsを使用して画質を失う
- 24. ImageJを使用して画像のサイズを変更してトリミングする
- 25. CoreDataを使用してNSDataを使用せずに画像を保存する
- 26. 画像にカスタムJquery UIサイズ変更ハンドルを適用する
- 27. CSSを使用してサイズ変更可能な画像を重ねて表示
- 28. jQueryを使用せずにオートコンプリートして
- 29. PHPを使用して$ _GETを使用して画像のサイズを変更する
- 30. jquery ajaxを使用して画像を画像コントロールに配置
、あなたは画像の大きさ(または)ファイルのサイズを意味していますか? –
はいファイルサイズはディメンションではありません –