HTML：

<input type="file" id="openimg"> <input type="button" id="load" value="Load" style="width:100px;"><br/> 

Width and Height (px): <input type="text" id="width" style="width:100px;">, <input type="text" id="height" style="width:100px;"><br/> 

<canvas id="myimg" width="300" height="300"></canvas>

的JavaScript/JQuery的：

$(function(){ 
    $("canvas#myimg").draggable(); 

    var canvas = document.getElementById("myimg"); 
    var context = canvas.getContext("2d"); 

    function draw() { 
     var chosenimg = $("#openimg").val(); 
     var w = parseInt($("#width").val()); 
     var h = parseInt($("#height").val()); 
     canvas.width = w; 
     canvas.height = h; 

     var img = new Image(); 
     img.onload = function() { 
      context.drawImage(img,0,0,img.width,img.height,0,0,w,h); 
     } 
     img.src = $("#openimg").val();} 

    $("#width").val(150); 
    $("#height").val(150); 

    $("#load").click(function(){ draw(); }); 
});

來源

2013-05-06 Michael Schwartz

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas = document.getElementById("myimg"); 
    var context = canvas.getContext("2d"); 

    function draw() { 
     var chosenimg = $("#openimg").val(); 
     var w = parseInt($("#width").val()); 
     var h = parseInt($("#height").val()); 
     canvas.width = w; 
     canvas.height = h; 

     var img = new Image(); 
     img.onload = function() { 
      context.drawImage(img,0,0,img.width,img.height,0,0,w,h); 
     console.log(img.src); 
     } 
     img.src = $("#openimg").val(); 
    } 

    $("#width").val(150); 
    $("#height").val(150); 
    $("#load").click(function(){ draw(); }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <input type="file" id="openimg"> 
    <input type="button" id="load" value="Load" style="width:100px;"><br/> 
    Width and Height (px): 
    <input type="text" id="width" style="width:100px;">, 
    <input type="text" id="height" style="width:100px;"><br/> 
    <canvas id="myimg" width="300" height="300"></canvas> 
</body> 
</html>

來源

2013-05-06 18:06:01 markE

照片的僅適用於桌面秀是從我的照片或任何文件夾。 idk爲什麼這是（我正在運行的Ubuntu 10.04） – 2013-05-06 20:58:32

我仍然不知道爲什麼它適用於某些文件夾而不是其他人，但它的工作原理不會少。再次感謝。 – 2013-05-06 21:35:47

我在猜測，因爲你使用Ubuntu，你也使用Firefox？如果是這樣，你可以告訴Firefox允許你訪問這樣的本地文件：http://graphic-sim.com/running_from_files.html這就是爲什麼你需要設置該標誌：https：//developer.mozilla.org/ zh-CN/docs/Same-origin_policy_for_file：_URIs – markE 2013-05-06 21:40:15

HTML5圖像瀏覽器（瀏覽添加圖像）

HTML：

的JavaScript/JQuery的：

回答

相關問題