画像アップスクリプトについて こんにちは。先にお...
プロフィール画像
miyasita1958さん 2016/10/25 09:46:34
助けてください。画像アップスクリプトについて
こんにちは。先にお願いですが、そろそろ還暦を迎える年寄りをです。勝手いってすみませんが知識も少なく具体的な回答でないと理解できません。高齢者でも、現在の画像をアップできるようにクリップボードからのアップが思いつき、WEBで検索して切り張りして途中までつくりましたが、最後のアップロード方法がわかりません。
ソース載せました。?????の引数はどうしたら渡せるでしょうか?
<script>
var src_canvas;
var src_ctx;
var image;
// ブラウザ判定
var clipboard_flg;
if((!window.navigator.msSaveBlob) &&
(window.navigator.userAgent.toUpperCase().indexOf('CHROME') != -1)){
// chrome
clipboard_flg = true;
}else if((window.navigator.msSaveBlob) &&
(window.navigator.userAgent.toUpperCase().indexOf('CHROME') != -1)){
// Edge
clipboard_flg = true;
}else{
// その他
clipboard_flg = false;
}
window.onload = function(){
src_canvas = document.getElementById("SrcCanvas");
src_ctx = src_canvas.getContext("2d");
image = document.getElementById("img_source");
}
if (clipboard_flg){
document.addEventListener('paste', function(e) {
e.preventDefault();
var items = e.clipboardData.items;
var dti = null;
for(i = 0; i < items.length; i++) {
if(items[i].type.indexOf("image") != -1) {
dti = items[i];
break;
}
}
if(dti){
image.onload = function(){
src_canvas.width = image.width;
src_canvas.height = image.height;
src_ctx.drawImage(image,0,0);
}
image.src = window.URL.createObjectURL(dti.getAsFile());
}else{
alert('err');
}
});
}
function getClipboardImage(){
if (clipboard_flg) return false;
function SearchImage(parent){
for(var i=0;i< parent.children.length;i++){
var child = parent.children[i];
if(child.nodeName.toUpperCase() == 'IMG'){
try{
var pollution_canvas = document.createElement("canvas");
pollution_canvas.style.display = 'none';
document.body.appendChild(pollution_canvas);
pollution_canvas.width = child.width;
pollution_canvas.height = child.height;
pollution_ctx = pollution_canvas.getContext("2d");
try{
pollution_ctx.drawImage(child,0,0);
}catch(e){
throw 'SecurityError';
}
pollution_ctx.getImageData(0, 0, pollution_canvas.width, pollution_canvas.height);
document.body.removeChild(pollution_canvas);
src_canvas.width = child.width;
src_canvas.height = child.height;
src_ctx.drawImage(child,0,0);
}catch(e){
alert(e +'\n\n' +'xxx\n'+'※Chromeをご利用ください。');
}
return true;
}
}
// 再帰処理
for(var i=0;i< parent.children.length;i++){
if (SearchImage(parent.children[i])) return true;
}
}
var paste = document.getElementById("PasteArea");
SearchImage(paste);
paste.innerHTML = '【使い方】~。';
document.getElementById("PasteArea").style.border='2px solid #ccc';
}
// ファイルアップロード
function upload_file_with_ajax(file){
var formData = new FormData();
formData.append('file', file);
$.ajax('/upload/image' , {
type: 'POST',
contentType: false,
processData: false,
data: formData,
error: function() {
success: function(res) {
}
});
}
function upload_file(){
upload_file_with_ajax(?????);
}
</script>
</head>
<body>
<p></p>
<div id="PasteArea" contenteditable="true" onkeyup ="getClipboardImage();"
onclick="PasteArea.style.border='1px solid #1e90ff';"
onblur="PasteArea.style.border='1px solid #ccc';"
style="width:90%;height:90px;border:1px solid #ccc;padding:10px;">
【使い方】<br>
1.このエリアをマウスでクリックします。<br>
2.キーボードの「Ctrl」キーを押しながら「V」キーを押します。<br>
3.アップロードをクリックします。<br>
</div>
<form name="form1" method="post"">
<input type="button" value="アップロード" onclick="upload_file()"/>
</form>
<img id="img_source" style="display:none;">
<canvas id="SrcCanvas"></canvas>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
jQueryのajax経由でアップロードしてよいという認識でよいですか?
<script src="適当なpath/jquery.js"></script>
<script>
$(function(){
$('[value=up]').on('click', function() {
var data=$('#imagearea img:first-child').attr('src');
if(data){
$.ajax({
type: 'POST',
url: 'uploadimage.php',
data: {
'data': data
},
dataType: 'text',
success: function( result ) {
},
});
}
});
});
</script>
<div id="imagearea" contenteditable='true'>ここに貼り付ける</div>
<input type="button" value="up">
あとはデータを受け取る側のuploadimage.phpが画像にファイル名をつけて
適当なpathにデータを流し込むだけです。
お返事遅れてすみません。
ご回答、どう組み込みすればよいかまだわかりませんが、これをヒントに色々勉強しつつ頑張ってみます。
JS覚えたいですが、年寄り初心者には結構ハードル高くて。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
画面遷移を行わずに同一ページ...
-
スマホ上で、左右スワイプで次...
-
Outlookのアカウントがあるとメ...
-
Colorboxがうまく設置できません
-
<tr>指定した表の行要素をボ...
-
【GAS】WEBアプリでハイパーリ...
-
GASでチェックボックスを一括of...
-
セレクトボックスで配列を呼び...
-
jqueryのselect2で検索欄の文字...
-
セレクトを全て選択されていな...
-
読み込んだQRコードをフォーム...
-
初心者です。gulpでコンパイル...
-
jquery 診断コンテンツにチェッ...
-
jsで質問です。 ボタンが二つ存...
-
jsonテキストデータの並び替え...
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
複数のボールの落下、バウンド...
-
連番画像「次へ」「前へ」で、...
-
複数の画像の中から複数の画像...
-
javascript 時計24時間表示
-
HPB_SCRIPT_ROV_50
-
imgのaltとtitleの要素を抜き出...
-
JavaScriptでシンプルなスライ...
-
クリックとダブルクリック
-
画像の座標位置取得
-
JavaScriptで画面サイズによっ...
-
HPに複数の画像をクリックで切...
-
スロットが変な動きをします
-
オンマウスで画像と文字を同時...
-
画像の入れ替え
-
テーブル幅を自動で画像幅にし...
-
Dreamweaver CS3を使用してい...
-
jQueryで画像を重ねる
おすすめ情報
はい、利用対象が不特定多数の高齢者です。
パニック時に画面の状況を教えてもらいたいのでなるべくシンプル操作でないと難しいです