我想知道是否有任何方法可以从imageData创建一个新的Image,这是以前从canvas元素获得的？
我已经搜索了一个解决方案,但他们似乎都将结果绘制到画布上.所以基本上我需要一种方法将ImageData对象直接转换为Image,如果可能的话.
如何更改putImageData规模与规模(1.5,1.5)不工作..
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
context.scale(1.5, 1.5);
context.putImageData(imageData, 0, 0);
我试图使用PDF.js读取整个.pdf文档,然后在单个画布上渲染所有页面.
我的想法:将每个页面渲染到画布上并获取ImageData(context.getImageData()),清除画布做下一页.我将所有ImageDatas存储在一个数组中,一旦所有页面都在那里,我想将数组中的所有ImageDatas放到一个画布上.
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
//Prepare some things
var canvas = document.getElementById('cv');
var context = canvas.getContext('2d');
var scale = 1.5;
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
pdf = _pdf;
//Render all the pages on a single canvas
for(var i = 1; i <= pdf.numPages; i ++){
pdf.getPage(i).then(function getPage(page){
var viewport = page.getViewport(scale);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({canvasContext: context, viewport: viewport});
pages[i-1] = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
p.Out("pre-rendered page …我正在开发一个可以加密图像并在画布上重绘解密图像的项目.由于我还不熟悉编码和编程,我目前正在重新绘制解密图像数据的问题,这是一个R,G,B,A形式的像素阵列.我认为只需将数据放入即可
ctx.putImageData(imgd,0,0);
但是firebug告诉我,该值没有实现imagedata的接口.我在这里发布了整个阵列.图像宽160像素,高120像素.
有没有办法重新格式化数组,以便它可以在画布上绘制？
我正在使用文件输入元素从android浏览器捕获图像。现在，我想将Blob数据转换为ImageData，以便可以使用来将其呈现在画布上putImageData。
<!DOCTYPE html>
<html>
<body>
<input type="file" id="file" />
</body>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var selFile = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var blobData = e.target.result;
console.log(e.target.result);
};
reader.onerror = function(e) {
console.log(e);
};
reader.readAsArrayBuffer(selFile);
}
document.getElementById('file').addEventListener('change',handleFileSelect, false);
</script>
</html>
在上面的代码中，如何将blobData转换为ImageData？提前致谢。
html5 getimagedata html5-canvas html5-filesystem putimagedata
我正在进入2D/3D图形项目,我面临性能问题.
我的算法采用两个图像:图片和相对灰度深度图.我还有一个10个画布("图层")的数组,最初是空白的.注意:所有图像都具有相同的尺寸.
我需要检查深度图的每个像素X; Y,并根据其颜色值,访问10个画布中的一个,并在其上绘制原始图像的X; Y像素.
结果算法有点像:
for (var y = 0; y < totalHeight; ++y) {
for (var x = 0; x < totalWidth; ++x) {
var index = (y * totalWidth + x) * 4; // index of the current pixel
// parse depth level using luminosity method
var depthLevel = Math.round(
0.21 * depthData[index] +
0.71 * depthData[index + 1] +
0.07 * depthData[index + 2]
);
// get the proper layer to modify
var layerIndex = Math.floor((layersCount …我通过以原始 ImageData 格式（RGBA 顺序每像素 4 个字节）发送每一帧，通过 WebSocket 流式传输视频。当我收到客户端上的每一帧（作为ArrayBuffer）时，我想使用putImageData尽可能有效地将此图像直接绘制到画布上。
这是我目前的解决方案：
// buffer is an ArrayBuffer representing a properly-formatted image
var array = new Uint8ClampedArray(buffer);
var image = new ImageData(array, width, height);
canvas.putImageData(image, 0, 0);
但是速度比较慢。我的理论是为什么：
数组（大小约为 1MB）被复制三次，一次进入Uint8ClampedArray，一次进入ImageData，最后进入画布，每帧（每秒 30 次）。
我new每帧使用两次，这可能是垃圾收集器的问题。
这些理论是否正确，如果正确，我可以采用什么技巧来尽快完成？我愿意接受特定于浏览器的答案。
需要做一些像素操作,但imagedata已经改变.现在它有一个"colorspace"属性.这是什么,我如何正常使用它？
只需获取chrome中的imagedata对象即可重现.
我使用屏幕外canvas根据某些变量的运行时值动态生成某些图像。在屏幕外画布上绘制图像后，我想获取它并在我的 web 应用程序的多个位置使用它。
策略 1：使用屏幕外画布的toDataURL()方法获取data:包含图像的URI，我可以img在页面中应该显示它的多个元素上以编程方式设置该URI 。
策略二：使用离屏canvas的getImageData()方法获取ImageData实例。用img元素替换canvas元素并调用putImageData()它们。
哪种策略在内存方面更有效？哪个更“地道”？我试图避免重复保存显示图像实例所需的内存。其他建议？
是否可以使用ImageData数组对象来获取 Image() 对象。我的最终目标是使用drawImage而不是putImageData因为putImageData太慢（来自 stackoverflow 类似的 qs 和我自己的测试）。我所拥有的只是ImageData要在画布上的现有图像之上绘制的数组。
我正在研究角度项目，我必须将图像放在画布上。图像没有本地存储，我只有图像数据，所以我使用它。
this.context.putImageData(imgData, firstPointX, firstPointY);
现在我的问题是我收到的图片是640 * 480。我想知道是否有办法改变图像大小，以便我可以显示大于640 * 480？
有没有办法使用getImageData和putImageData来缩放画布.Below是代码片段.
var c=document.getElementById("myCanvas");
var c2=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
var ctx2=c2.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy(){
var imgData=ctx.getImageData(10,10,50,50);
ctx2.translate(133.333,0);
ctx2.scale(0.75,1);
ctx2.putImageData(imgData,10,70);
}
我试过这个http://jsbin.com/efixur/1/edit.
谢谢Ajain
putimagedata ×12
javascript ×7
canvas ×5
getimagedata ×5
html5-canvas ×5
html5 ×3
angular ×1
arraybuffer ×1
arrays ×1
data-uri ×1
html ×1
off-screen ×1
optimization ×1
pdf.js ×1
pixel ×1
scale ×1
typescript ×1