标签: html5-canvas

我试图用帆布调整一些图像的大小,但我对如何平滑它们毫无头绪.在Photoshop,浏览器等..他们使用了一些算法(例如双三次,双线性)但我不知道它们是否内置于画布中.

这是我的小提琴:http://jsfiddle.net/EWupT/

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width=300
canvas.height=234
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);

第一个是普通的已调整大小的图像标记,第二个是画布.请注意画布如何不那么平滑.我怎样才能实现'平滑'？

我有一个允许用户上传图像的表单.

加载图像后,我们会对其进行一些缩放,以便在将文件大小传回服务器之前减少其文件大小.

为此,我们将它放在画布上并在那里操纵它.

此代码将在画布上呈现缩放图像,画布大小为320 x 240px:

ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

...其中canvas.width和canvas.height是基于原始图像大小的图像高度和宽度xa缩放系数.

但是当我去使用代码时:

ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height

...我只在画布上获得部分图像,在这种情况下是左上角.尽管实际图像尺寸大于320x240画布尺寸,但我需要将整个图像"缩放"以适合画布.

因此,对于上面的代码,宽度和高度是1142x856,因为这是最终图像大小.我需要保持该大小,以便在提交表单时将beck传递给服务器,但只希望在用户的画布中显示较小的视图.

我在这里错过了什么？有人能指出我正确的方向吗？

提前谢谢了.

我正在使用canvas及其ImageData对象,它包含大量数据(数百万个整数).因此,使用几个阵列已占用大量内存(最多300MB).有没有办法在没必要时释放某些阵列的内存？我正在尝试分配undefined给该变量.这样对吗？

我想绘制一个如图所示的网格,但我完全不知道我应该从哪里开始.我应该使用SVG还是应该使用Canvas和HTML5以及如何绘制它.
请指导一下.我希望这个网格在其上绘制矩形,圆形或其他图表,我将计算该图的面积,如方形区域.

我在移动设备上制作了一个简单的网络应用程序,允许访问者使用html5输入[type = file]元素捕获照片.然后我会在网上显示它以供预览,然后访问者可以选择将照片上传到我的服务器用于其他目的(即:上传到FB)

当我使用iPhone拍照并垂直握持时,我发现照片的方向存在问题.照片的标签方向正确.但是,当我尝试使用drawImage()方法将其绘制到画布中时,它会被旋转90度.

我试图以4个方向拍摄照片,其中只有一个可以在画布上绘制正确的图像,其他图像可以旋转,甚至可以颠倒翻转.

好吧,我很困惑,以正确的方向来解决这个问题...感谢您的帮助......

这是我的代码,主要来自MDN的副本

<div class="container">
            <h1>Camera API</h1>

            <section class="main-content">
                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>

                <p>
                    <form method="post" enctype="multipart/form-data" action="index.php">
                        <input type="file" id="take-picture" name="image" accept="image/*">
                        <input type="hidden" name="action" value="submit">
                        <input type="submit" >
                    </form>
                </p>

                <h2>Preview:</h2>
                <div style="width:100%;max-width:320px;">
                    <img src="about:blank" alt="" id="show-picture" …

jQuery('#carregar').click(function(){
var canvas  = document.getElementById('canvas');
var image   = document.getElementById('image');
var element = canvas.getContext("2d");
element.clearRect(0, 0, canvas.width, canvas.height);
element.drawImage(image, 0, 0, 300, 300);
});

jsfiddle.net/braziel/nWyDE/

我有一个问题是将图像向右或向左旋转90°.

我在画布上使用了一个图像,同一个屏幕将有几个画布等于示例的画布,但我把它尽可能地靠近项目.

我问,当我点击"向左旋转"和"向右旋转"时,如何向左或向右旋转图像90°？

我在网上尝试了几个代码,但都没有用.

我有一个名为的函数generateNoise(),它创建一个canvas元素并为其绘制随机的RGBA值; 这,给出了噪音的外观.

我的问题

什么是无限制动噪音的最佳方式,以给出运动的外观.这可能会有更多的生命？

的jsfiddle

function generateNoise(opacity) {
    if(!!!document.createElement('canvas').getContext) {
        return false;
    }
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        x,y,
        r,g,b,
        opacity = opacity || .2;

        canvas.width = 55;
        canvas.height = 55;

        for (x = 0; x < canvas.width; x++){
            for (y = 0; y < canvas.height; y++){
                r = Math.floor(Math.random() * 255);
                g = Math.floor(Math.random() * 255);
                b = Math.floor(Math.random() * 255);

                ctx.fillStyle = 'rgba(' + r + ',' + b + ',' + g + …

我发现的许多库,如Jcrop,实际上并没有进行裁剪,它只创建了一个图像裁剪UI.然后它取决于服务器进行实际裁剪.

如何在不使用任何服务器端代码的情况下使用某些HTML5功能在客户端进行图像裁剪.

如果是,是否有一些例子或提示？

我需要一种在不使用HTML元素的情况下在JavaScript中调整图片大小的方法.

我的移动HTML应用程序拍摄照片,然后将它们转换为base64字符串.此后,我需要在将它们发送到API之前调整它们的大小,以节省存储空间.

我正在寻找一种不同的,更合适的方法来调整它们然后使用canvas元素.有办法吗？

为什么我应该使用requestAnimationFrame而不是setTimeout或setInterval？

这个自我回答的问题是一个文档示例.