我目前正在使用http://paperjs.org创建一个 HTML5 画布绘图应用程序。我想让用户将图像上传到画布中。我知道我需要登录和注册，但有没有更简单的方法？我已经看到了 HTML5 拖放上传。
如何将图像上传到 HTML5 画布
IT技术
javascript
html
2021-01-28 05:22:40
3个回答
我假设您的意思是将图像加载到画布中而不是从画布上传图像。
通读他们在这里的所有画布文章可能是个好主意 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]);
}
不需要 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..
<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>
检查演示