标签: html5-canvas

我正在尝试渲染存储在javascript中的PNG图像Uint8Array.我最初尝试的代码如下:

var imgByteStr = String.fromCharCode.apply(null, this.imgBytes);

var pageImg = new Image();
pageImg.onload = function(e) {

    // Draw onto the canvas
    canvasContext.drawImage(pageImg, 0, 0);

};

// Attempt to generate the Data URI from the binary
// 3rd-party library adds toBase64() as a string function
pageImg.src="data:image/png;base64,"+encodeURIComponent(imgByteStr.toBase64());

但是,我发现由于某种原因,onload函数从未运行(我在chrome中设置了断点并且它根本就没有命中).我发现如果我将src设置为URL而不是数据URI,它可以正常工作.但是,由于一些限制,我不能直接引用图像的URL,即它必须从中加载UInt8Array.

此外,为了使事情略微复杂化,这些图像的大小可能是兆字节.根据我的阅读,尝试将数据URI用于非常大的图像存在兼容性问题.因此,我对使用它们非常犹豫.

因此,问题是如何在不使用数据URI或直接引用图像URL的情况下将此字节数组作为PNG渲染到画布上下文中？

我也尝试使用类似下面的东西直接使用该putImageData函数操作图像数据.请记住,我并不是100%了解此功能的工作原理

var imgdata = canvasContext.createImageData(this.baseHeight, this.baseWidth);
var imgdatalen = imgdata.data.length;
for(var i=0; i<imgdatalen; i++) {
    imgdata.data[i] = _this.imgBytes[i];
}
canvasContext.putImageData(imgdata, 0, 0);

它是从一个我已经关闭的标签的博客中解除的,所以对没有给予适当信用的灵感表示道歉.

此外,在慢慢锤击这件事的同时,我在Chrome中遇到了错误SECURITY_ERR: DOM …

我试图从HTML5canvas将图像(JPEG)保存到桌面.我可以在新窗口中打开window.open(canvas.toDataURL('png'), "");,但如何将其保存到桌面？谢谢.

有没有办法明确选择特定时刻出现的所有对象.这可以通过鼠标轻松完成全部选择.是否存在类似按钮的代码解决方案,Select All以便单击它将使所有结构类型对象被选中,然后我可以使用canvas.getActiveGroup();并迭代将更改应用于整个ActiveGroup .

我正在编写一个HTML5画布绘图应用程序,我需要能够判断在mousemove事件期间是否按下了鼠标左键.在Chrome上,这可行:

if (event.which == 1) { <do stuff> }

但是在FireFox中,无论是否按下按钮,event.which 总是为1.

如何在mousemove事件期间检测鼠标按键是否被按下？

是否有任何类似d3.js的Canvas库(是svg库).我在这里有一个网站,我用svg元素编写了一个图形,但它在智能手机的浏览器上效率不高,而且运行速度很慢.我现在想要用它的2d画布类型来改变它,看它是否更好.你能建议一个对此有用的画布库吗？

谢谢...

我正在迭代从canvas类似的一些图像数据,所以:

var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height);
var data = imageData.data;

for (var i = data.length; i >= 0; i -= 4) {
    if (data[i + 3] > 0) {
        data[i] = this.colour.R;
        data[i + 1] = this.colour.G;
        data[i + 2] = this.colour.B;
    }
}

如何计算当前的X和Y像素坐标？

是否可以在画布上写图像并用背景写文字？例如这样:

在我正在研究的3D引擎中,我已经成功地在3D中绘制了一个立方体.就我而言,填充边的唯一方法是使用纯色或渐变.为了让事情更令人兴奋,我真的很想用简单的位图实现纹理映射.

关键是我几乎找不到关于JavaScript中图像处理主题的任何文章或代码示例.此外,HTML5画布中的图像支持似乎仅限于裁剪.

我怎样才能拉伸位图,以便矩形位图可以填满不规则的立方体面？在2D中,由于透视,投影的方形立方体面不是方形,所以我必须拉伸它以使其适合任何四边形.

希望这张图片澄清了我的观点.左脸现在充满了白色/黑色渐变.在纹理映射后,我怎么能用位图填充它？

有没有人对使用JavaScript和HTML5 Canvas的透视纹理贴图(或图像处理)有任何提示？

编辑:我得到它的工作,感谢6502!

然而,它是CPU密集型的,所以我很想听到任何优化的想法.

结果使用6502的技术 - 使用纹理图像

如何拍摄隐藏div的截图？下面给出的代码不适用于隐藏的div.

HTML

<div id="mydiv" style="display:none;" >  
 <p>Text</p>
</div>

<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>

 <div id="image">

  </div>

脚本

<script>
  var elem = $('#printDiv');
        html2canvas(elem, {
            onrendered: function (canvas) {
                var data = canvas.toDataURL('image/png');
                var image = new Image();
                image.src = data;
                document.getElementById('image').appendChild(image);
            }
        });

</script>

当我们将div"mydiv"的样式设置为"display:block"时,它可以工作.

我需要在html页面上的2个元素之间画线

结果应该是这样的:http: //img2.timg.co.il/forums/1_173873919.JPG

我想知道最好的办法是什么

1. 使用canvas和html5
2. 使用背景图像.
3. 由ajax制作动态图像

我想知道什么是最好的方式,如果在网上有一个简单的演示

谢谢