タグ付けされた質問 「html5-canvas」

合成操作を試し、キャンバスに画像を描画した後、画像を削除して合成しようとしています。どうすればよいですか？ 他の画像を再描画するためにキャンバスをクリアする必要があります。これはしばらく続くので、毎回新しい長方形を描くことが最も効率的なオプションになるとは思いません。

1012 javascript  html  canvas  html5-canvas  composite 

その場で要素を作成し、それらを移動できるようにするための最良のアプローチは何ですか？たとえば、長方形、円、多角形を作成し、それらのオブジェクトを選択して移動したいとします。 HTML5がこれを可能にする3つの要素、svg、canvas、divを提供していることを理解しています。私がやりたいことについて、これらの要素のどれが最高のパフォーマンスを提供しますか？ これらのアプローチを比較するために、それぞれにヘッダー、フッター、ウィジェット、テキストコンテンツが含まれる、視覚的に同一の3つのWebページを作成することを考えていました。最初のページのウィジェットは完全にcanvas要素で作成され、2番目のウィジェットは完全に要素で作成されsvg、3番目のウィジェットはプレーンdiv要素、HTMLおよびCSSで作成されます。

476 javascript  html  svg  html5-canvas 

HTML5 <canvas>要素をページに合わせて自動的にスケーリングするにはどうすればよいですか？ たとえば<div>、heightとwidthプロパティを100％に設定することでをスケーリングできますが、スケーリングされ<canvas>ませんか？

400 javascript  html  html5-canvas 

ユーザーがアルゴリズムから生成された画像を保存できるようにするジェネレーティブアートプロジェクトに取り組んでいます。一般的な考え方は次のとおりです。 生成アルゴリズムを使用してHTML5キャンバス上に画像を作成する 画像が完成したら、ユーザーがキャンバスを画像ファイルとしてサーバーに保存できるようにします ユーザーが画像をダウンロードするか、アルゴリズムを使用して作成された作品のギャラリーに追加できるようにします。 しかし、私は2番目のステップで立ち往生しています。Googleの助けを借りて、私はこのブログ投稿を見つけました。 これがJavaScriptコードにつながりました： function saveImage() { var canvasData = canvas.toDataURL("image/png"); var ajax = new XMLHttpRequest(); ajax.open("POST", "testSave.php", false); ajax.onreadystatechange = function() { console.log(ajax.responseText); } ajax.setRequestHeader("Content-Type", "application/upload"); ajax.send("imgData=" + canvasData); } および対応するPHP（testSave.php）： <?php if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) { $imageData = $GLOBALS['HTTP_RAW_POST_DATA']; $filteredData = substr($imageData, strpos($imageData, ",") + 1); $unencodedData = …

261 javascript  php  ajax  html5-canvas 

中心的な単語が1つあるWebページが欲しい。 この単語をアニメーションで描画して、ページが同じように単語を「書き出す」ようにします。つまり、ある時点から始まり、最終的な結果がグリフになるように時間とともに線と曲線を描画します。 これが<canvas>DOMで行われるかどうかは気にせず、JavaScriptとCSSのどちらで行われるかは気にしません。jQueryがないことは良いことですが、必須ではありません。 これどうやってするの？私は運が悪くて徹底的に検索しました。

229 javascript  css  canvas  html5-canvas  css-shapes 

Nihilogicの "Canvas2Image" JavaScriptツールを使用して、キャンバスの描画をPNG画像に変換しています。今必要なのは、このツールが生成するbase64文字列を、PHPを使用してサーバー上の実際のPNGファイルに変換することです。 手短に言えば、私が現在行っていることは、Canvas2Imageを使用してクライアント側でファイルを生成し、次にbase64でエンコードされたデータを取得して、AJAXを使用してサーバーに送信することです。 // Generate the image file var image = Canvas2Image.saveAsPNG(canvas, true); image.id = "canvasimage"; canvas.parentNode.replaceChild(image, canvas); var url = 'hidden.php', data = $('#canvasimage').attr('src'); $.ajax({ type: "POST", url: url, dataType: 'text', data: { base64data : data } }); この時点で、「hidden.php」はdata：image / png; base64、iVBORw0KGgoAAAANSUhEUgAABE ...のようなデータブロックを受け取ります。 この時点から、私はかなり困惑しています。私が読んだことから、PHPのimagecreatefromstring関数を使用することになっていると思いますが、実際にbase64でエンコードされた文字列から実際のPNG画像を作成し、サーバーに保存する方法がわかりません。助けてください！

212 php  javascript  base64  html5-canvas 

キャンバスを画像に保存したい。私はこの機能を持っています： function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } それは私にエラーを与えます： Uncaught SecurityError： 'HTMLCanvasElement'で 'toDataURL'を実行できませんでした：汚染されたキャンバスはエクスポートされない可能性があります。 私は何をすべきか？

187 javascript  html5-canvas 

デジタルカメラの写真は、多くの場合、EXIFの「向き」タグが付いたJPEGとして保存されます。正しく表示するには、設定されている方向に応じて画像を回転またはミラーリングする必要がありますが、ブラウザはこの情報を無視して画像をレンダリングします。大規模な商用Webアプリでも、EXIFオリエンテーションのサポートは不安定な場合があります1。同じソースは 、JPEGが持つことができる8つの異なる方向の優れた要約も提供します。 サンプル画像は4にあります。 問題は、クライアント側で画像を回転/ミラーリングして、正しく表示し、必要に応じてさらに処理できるようにする方法です。 EXIFデータを解析するために利用できるJSライブラリがあり、方向属性2を含みます。webworkersの使用が必要な、大きな画像を解析するときのFlickrは、可能なパフォーマンス上の問題を指摘し3。 コンソールツールは、画像の向きを正しく変更できます5。問題を解決するPHPスクリプトは6で利用可能です

154 javascript  rotation  html5-canvas  exif 

私はhtml5キャンバス要素を使用して、ブラウザーで画像のサイズを変更します。品質が非常に低いことが判明しました。私はこれを見つけました：<canvas>のスケーリング時に補間を無効にしますが、品質の向上には役立ちません。 以下は、CSSとJSのコードと、Photoshopで呼び出され、キャンバスAPIで拡大縮小された画像です。 ブラウザで画像を拡大縮小するときに最適な品質を得るにはどうすればよいですか？ 注：大きな画像を小さな画像に縮小し、キャンバスの色を変更して、結果をキャンバスからサーバーに送信します。 CSS： canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS： var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $img.load(function() { var originalContext = $originalCanvas[0].getContext('2d'); originalContext.imageSmoothingEnabled = false; originalContext.webkitImageSmoothingEnabled = false; originalContext.mozImageSmoothingEnabled = false; originalContext.drawImage(this, 0, 0, 379, 500); }); photoshopでサイズ変更された画像： …

149 javascript  css  html  canvas  html5-canvas 

描画アプリケーションの場合、マウスの移動座標を配列に保存してから、lineToで描画します。結果の線は滑らかではありません。収集されたすべてのポイント間に単一のカーブを作成するにはどうすればよいですか？ 私はグーグルで検索しましたが、線を引くための3つの関数しか見つかりませんでした。2つのサンプルポイントの場合は、単にを使用しますlineTo。3つのサンプルポイントのquadraticCurveTo場合、4つのサンプルポイントの場合bezierCurveTo。 （bezierCurveTo配列の4つのポイントごとにa を描画しようとしましたが、これにより、連続した滑らかな曲線ではなく、4つのサンプルポイントごとにねじれが発生します。） 5つのサンプルポイント以降で滑らかな曲線を描く関数を作成するにはどうすればよいですか？

133 javascript  canvas  html5-canvas  bezier  spline 

私のコードは私のローカルホストでうまく機能していますが、サイトでは機能していません。 コンソールからこのエラーを受け取りました、この行.getImageData(x,y,1,1).data： Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 私のコードの一部： jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().top); if (this.target.nodeName!=="CANVAS")return null; return this.target.getContext('2d').getImageData(x,y,1,1).data; } 注：画像のURL（src）はサブドメインのURLからのものです

131 javascript  html  html5-canvas 

カメラがJPEG EXIF画像データで設定した元の回転に基づいて写真を回転させたい。トリックは、JavaScriptとを使用して、これらすべてがブラウザーで発生することです<canvas>。 JavaScript がローテーション情報を読み取るために、JPEG、ローカルファイルAPIオブジェクト、ローカル<img>またはリモートの<img>EXIFデータにどのようにアクセスしますか？ サーバー側の回答はOKではありません。クライアント側のソリューションを探しています。

125 javascript  jpeg  exif  html5-canvas 

私はキャンバスのデフォルトの背景色のように見えるものを黒から透明/その他の色に変更しようとしていますが、運が悪いです。 私のHTML： <canvas id="canvasColor"> 私のCSS： <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> 次のオンラインの例でわかるように、キャンバスにアニメーションを追加しているので、不透明度だけを行うことはできません。ID上。 ライブプレビュー：http : //devsgs.com/preview/test/particle/ デフォルトの黒を上書きする方法はありますか？

122 css  html  canvas  html5-canvas  three.js 

2Dゲーム/アプリに2D-CanvasではなくWebGLを使用する理由はありますか？ 言い換えれば、2D-Canvasでは簡単に実現できないWebGLによって提供される2D機能は何ですか？

112 html  html5-canvas  webgl 

2つのキャンバスを重ねて2層のキャンバスにしようとしています。 私はここで例を見ました： <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> しかし、両方のキャンバスを画面の中央に揃えるように設定したいと思います。の値を設定した場合left（iPadでapsを実行しているように）画面の向きを変更しているときに定数として、キャンバスは画面の中央にとどまらず、動作方法が変わります <div align="center"> 誰か助けてもらえますか？

103 css  html5-canvas