76

我目前正在使用http://paperjs.org创建一个 HTML5 画布绘图应用程序。我想让用户将图像上传到画布中。我知道我需要登录和注册，但有更简单的方法吗？我看过 HTML5 拖放上传。

4

4 回答 4

155

我假设您的意思是将图像加载到画布中而不是从画布上传图像。

阅读他们在这里的所有画布文章可能是个好主意 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]);     
}
于 2012-06-06T00:53:30.480 回答
24

不需要 FileReader*，最好使用URL.createObjectURL方法，该方法将直接创建指向磁盘上文件的符号链接。这将减少内存使用量，并具有额外的好处，即只有一个异步事件要等待（其中一个img.onload）。

document.getElementById('inp').onchange = function(e) {
  var img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
  var canvas = document.getElementById('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0,0);
}
function failed() {
  console.error("The provided file couldn't be loaded as an Image media");
}
<input type="file" id="inp">
<canvas id="canvas"></canvas>

*IIRC 只有少数版本的 Chrome 支持 FileReader，但还不支持 URL.createObejctURL，因此如果您针对这些版本，您可能需要 FileReader..

于 2018-08-09T07:18:47.247 回答
0

通过画布创建可消耗图像的最佳方法是从您从输入中获得的文件中创建一个ImageBitmap 。

这将使用优化的路径来生成浏览器渲染该图像所需的内容，并将位图数据存储在 GPU 中，允许在被要求时快速绘制。

鉴于这是一个相当新的功能（Safari 仅在去年添加了支持），您可能想要使用像我的这个这样的 polyfill 。

document.querySelector("input").oninput = async (evt) => {
  try {
    const file = evt.target.files[0];
    const bitmap = await createImageBitmap(file);
    const canvas = document.querySelector("canvas");
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(bitmap, 0, 0);
  }
  catch(err) {
    console.error(err);
  }
};
<!-- createImageBitmap polyfill for old browsers --> <script src="https://cdn.jsdelivr.net/gh/Kaiido/createImageBitmap/dist/createImageBitmap.js"></script>
<input type="file">
<canvas></canvas>

于 2022-01-05T01:56:44.213 回答
-5 
<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>

检查演示

于 2012-11-22T14:25:20.377 回答