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的：

回答

相关问题