如何将图像上传到HTML5画布中

10 浏览
0 Comments

如何将图像上传到HTML5画布中

我目前正在使用http://paperjs.org来创建一个HTML5画布绘图应用。我想让用户可以上传图片到画布中。我知道我需要创建登录和注册功能，但有没有更简便的方法呢？我看到了HTML5拖放上传的方式。

0

3 答案

0 Comments

问题出现的原因是希望实现在HTML5画布中上传图像。代码中使用了一个新的`canvas`元素，并将其附加到一个包装器中，这样可以在不知道需要多少个画布的情况下使用。具体解决方法如下：

1. 在HTML文件中，使用``创建一个文件上传输入框，用于选择要上传的图像文件。

2. 在JavaScript中，通过`document.getElementById('inp').onchange`监听文件上传输入框的变化事件。

3. 在事件处理函数中，使用`new Image()`创建一个新的图像对象。

4. 设置图像对象的`onload`属性为一个绘制函数`draw`，设置`onerror`属性为一个失败处理函数`failed`。

5. 使用`URL.createObjectURL(this.files[0])`获取上传的文件的URL，并将其赋值给图像对象的`src`属性，实现图像的加载。

6. 在绘制函数`draw`中，使用`document.createElement('canvas')`创建一个新的`canvas`元素，并使用`getContext('2d')`获取2D绘图上下文。

7. 设置新创建的`canvas`元素的宽度和高度为上传图像的宽度和高度。

8. 使用`ctx.drawImage(this, 0, 0)`在画布上绘制图像。

9. 使用`document.getElementById('gallery').append(canvas)`将绘制好的画布添加到具有id为`gallery`的元素中。

10. 在失败处理函数`failed`中，输出错误信息到控制台，提示上传的文件无法加载为图像媒体。

此外，还提供了一段CSS代码，用于样式化画廊展示的画布元素。CSS代码中设置了`#gallery`元素为弹性布局，并设置了边距和间距。画布元素的样式通过设置高度、边框半径、宽高比和对象适应方式来实现装饰效果。

最终的效果是在HTML页面中显示一个文件上传输入框和一个用于展示上传图像的画布画廊。用户选择图像文件后，画布中会显示出该图像。

0
0 Comments

问题的出现原因是在HTML5 canvas中如何上传图片。解决方法是使用URL.createObjectURL方法创建一个指向文件的符号链接，然后在img.onload事件中绘制图片。如果加载失败，则在img.onerror事件中报错。可以通过调整drawImage方法的参数来调整图片的尺寸以适应canvas。然而，在Chrome版本71之后，这种解决方法存在问题，具体是什么问题尚不清楚。对于新版本的Chrome是否有更新的解决方案也不确定。该解决方案可能受到CSP规则的限制，导致无法访问blob://URL。除了这种解决方法外，还可以尝试使用ImageBitmap构造函数进行实验性的尝试。

0
0 Comments

如何将图片上传到HTML5画布

在HTML5画布中加载图像，而不是从画布中上传图像，你需要在JavaScript中创建一个图像对象，并将图像的src属性设置为文件的位置。如果要从用户那里加载图像，你需要使用文件系统API。

以下是一个简单的示例：

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 API的文件输入或拖放区域，因为你不能以编程方式访问用户的文件系统。

如果在示例中选择了PC上的照片后，画布没有更新，可能是因为该示例使用了MooTools库，而该库目前不起作用。应该已经修复了这个问题。

你可以在这里阅读有关画布的所有文章：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

IE10+支持FileReader，但如果需要兼容其他浏览器，可以使用Polyfill。你可以在这里找到一个Polyfill：https://github.com/Jahdrien/FileReader

0