画像をページの背景として配列リストから修正する

ユーザーが変更したい場合、htmlページの背景として画像を追加しようとしています。入力ファイルタイプを使用してローカルにアクセスしました私は彼らが望むものを選択するようにもできます。しかし、今私は、ページbackgroundImageとして固定させるために、ユーザーが選択したイメージをどのように作ることができますか？ここに私のコードです。これは、デスクトップの背景やスマートフォンの壁紙のようなものです。画像をページの背景として配列リストから修正する

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <title>Understanding File upload and File access Javascript</title> 
</head> 
<body> 
    <input type = "file" id = "files" name = "files[]" multiple></input> 
    <output id = "list"></output> 
</body> 
<script src = "fileaccess.js" type = "text/javascript"></script> 
</html>

fileaccess.js

if(window.File && window.FileReader && window.FileList && window.Blob){ 
    alert("Yes, its supported in this browser"); 
}else{ 
    alert('The File APIs are not fully supported in this browser.'); 
} 

function handleFileSelect(evt){ 
    var files = evt.target.files; 
    var output = []; 
    for(var i = 0, f; f = files[i]; i++){ 
     output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a',') - ', 
        f.size, 'bytes, last modified: ', 
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
        '</li>'); 
    } 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 

} 
document.getElementById('files').addEventListener('change', handleFileSelect, false);

いくつかの助けを与えてください！

出典

2016-07-13 learner

FileReaderをインスタンス化し、選択した画像をreadAsDataURL()で読み取り、結果のデータURLをbody.style.backgroundImageに割り当てる必要があります。

イメージの選択をユーザーに選択させるには、ファイルをイメージまたはキャンバス要素にロードし、表示されたイメージの一部を選択して最後にイメージ選択をオフスクリーンキャンバス。その後、body.style.backgroundImageにキャンバスのデータのURLを割り当てることができます。

function imageToBackground(image, x, y, width, height) { 
 
    var canvas = document.createElement("canvas"); 
 
    canvas.width = width; 
 
    canvas.height = height; 
 
    var context = canvas.getContext("2d"); 
 
    context.drawImage(image, x, y, width, height, 0, 0, width, height); 
 
    document.body.style.backgroundImage = "url(" + canvas.toDataURL() + ")"; 
 
} 
 

 
function readImage(file, image) { 
 
    var reader = new FileReader(); 
 
    reader.addEventListener("load", function() { 
 
    image.src = reader.result; 
 
    }); 
 
    reader.readAsDataURL(file); 
 
} 
 

 
var file = document.getElementById("file"); 
 
var image = document.getElementById("image"); 
 
var button = document.getElementById("button"); 
 

 
file.addEventListener("change", function(event) { 
 
    var file = event.target.files[0]; 
 
    if (file) readImage(file, image); 
 
}); 
 

 
button.addEventListener("click", function(event) { 
 
    // Todo: let the user chose the region 
 
    imageToBackground(image, 0, 0, 100, 100); 
 
});

<input type="file" id="file"> 
 
<image id="image"> 
 
<input type="button" id="button" value="Set as background">

あなたが今ロードされた画像の領域を選択する方法をユーザに提供する必要があります。ネット上で利用可能な多くの画像クロッピングプラグインの1つを選択するか、独自の実装を思いついてください。

出典

2016-07-13 11:31:43

ありがとう、@le_mとにかく、画像から特定のものを選択して背景として設定することができます。 – learner

@RSNは特定のものを選択できますか？あなたは複数の選択されたものの特定のイメージを意味しますか？ –

画像の特定のセクション。申し訳ありませんが、間違いを入力する – learner

画像をページの背景として配列リストから修正する

答えて

関連する問題