現在、http://paperjs.orgを使用してHTML5キャンバス描画アプリケーションを作成しています。私はユーザーがキャンバスに画像をアップロードできるようにしたい。私はログインとサインアップをする必要があることを知っていますが、より簡単な方法がありますか?私はHTML5ドラッグアンドドロップのアップロードを見てきました。イメージをHTML5キャンバスにアップロードする方法
41
A
答えて
104
イメージをキャンバスにロードし、キャンバスからイメージをアップロードしないことを意味します。
おそらく、彼らが持っているすべてのキャンバスの記事を読むことをお勧めだろうhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
こっちでも、基本的に何がやりたいことは、JavaScriptで画像を作成し、image.srcを設定しています=ファイルの場所が何であっても。ユーザーのイメージを最後にロードする場合は、ファイルシステムAPIを使用することになります。うまく行ってhttp://jsfiddle.net/influenztial/qy7h5/
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
-4
<script>
window.onload = function() {
var canvas=document.getElementById(“drawing”); // grabs the canvas element
var context=canvas.getContext(“2d”); // returns the 2d context object
var img=new Image() //creates a variable for a new image
img.src= “images/vft.jpg” // specifies the location of the image
context.drawImage(img,20,20); // draws the image at the specified x and y location
}
</script>
チェックDemo
関連する問題
- 1. HTML5キャンバスから別のHTML5キャンバスにドラッグアンドドロップする方法
- 2. html5:キャンバスをイメージにコピーして戻す
- 3. DjangoでPILイメージにhtml5キャンバスをロード
- 4. HTML5キャンバスでアナグリフ3Dイメージを作成
- 5. イメージをサーバーにアップロードする方法
- 6. イメージをhtml5キャンバスにワープすることはできますか?
- 7. html5キャンバスに大量のイメージを描画する
- 8. html5キャンバスのキャンバス
- 9. HTML5キャンバスをSVGに変換する方法は?
- 10. HTML5キャンバスにオーディオ波形をレンダリングする方法は?
- 11. オブジェクトをhtml5キャンバスの位置にスナップする方法は?
- 12. html5キャンバス用スプレーペイントツールの追加方法?
- 13. イメージをHTML5キャンバスに合わせてサイズ変更
- 14. HTML5キャンバスでデザインする - レンダリングを高速化する方法
- 15. イメージをアップロードする前に、イメージIDでイメージパスを生成する方法
- 16. イメージがHTML5キャンバスに表示されない
- 17. HTML5キャンバス「クリアキャンバス」ボタンを作成する適切な方法
- 18. HTML5キャンバスで描画をアニメートする方法
- 19. HTML5キャンバスに描画するときにドロップシャドウを削除する方法
- 20. HTML5キャンバスを使用した不規則なイメージのドラッグアンドドロップ
- 21. HTML5キャンバスで画像の上にテキストを書く方法は?
- 22. キャンバスにビデオを描画するHTML5
- 23. HTML5キャンバスにレイヤーを実装する
- 24. HTML5キャンバスにカラーピッカーを作成する
- 25. マルチレイヤーHTML5キャンバスをレイヤーイメージに使用する
- 26. html5キャンバスDataURLをmySQLに保存する
- 27. アップロードの前後にイメージをプレビューする方法は?
- 28. html5キャンバスでクリック可能な点を作る方法は?
- 29. WebGL:イメージ/キャンバスの一部だけをテクスチャとしてアップロードする効率的な方法はありますか?
- 30. イメージをキャンバスに比例してサイズ変更するには? HTML5のキャンバスにロードされたイメージのサイズを変更する
:
は一緒にここに簡単な例を投げました。私はFileReaderについて知らなかった –
IE10 + FileReader - http://caniuse.com/filereader - しかし、polyfillは明らかに存在する、https://github.com/Jahdrien/FileReader –
ボタン?この例では "e"は何を参照していますか? – Waltari