作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我几天来一直在尝试仅使用 Canvas API 以及 getImageData 和 putImageData 来重现图像,遵循我在网上找到的一些教程。使用正方形或从 Canvas 上绘制的任何其他形式很简单,但使用外部图片似乎更困难。
你可以看看我是如何尝试的,如果你有解决方案,我很乐意阅读。我尝试读取放置在 Canvas 左侧的图像,然后将其复制到同一 Canvas 的右侧。
var c = document.getElementById("canvas"),
ctx = c.getContext('2d');
img = new Image(),
img.src = "http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg";
img.onload = function(){
ctx.drawImage(img, 0, 0, 400, 300);
}
//read the width and height of the canvas
var width = c.width,
height = c.height,
w2 = width / 2,
imgData = ctx.getImageData(0, 0, 400, 300);
function drawing(){
var index= (height * w2) * 4;
for(index= 0; index<=imgData.data.length; index+=4){
red = imgData.data[index];
green = imgData.data[index+1];
blue = imgData.data[index+2];
alpha = imgData.data[index+3];
}
ctx.putImageData(imgData, w2, 300);
}
drawing();
这是一个 fiddle :http://jsfiddle.net/6g82o9Lk/
感谢您的帮助!
最佳答案
首先:您的 var 定义开头存在语法错误:
var c = document.getElementById("canvas"),
ctx = c.getContext('2d'),
img = new Image();
img.src = "http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg";
其次,图像数据不会在onload之前,所以这样会更好:
img.onload = function(){
ctx.drawImage(img, 0, 0, 400, 300);
drawing();
}
function drawing(){
//read the width and height of the canvas
var width = c.width,
height = c.height,
w2 = width / 2,
imgData = ctx.getImageData(0, 0, 400, 300);
var index= (height * w2) * 4;
for(index= 0; index<=imgData.data.length; index+=4){
red = imgData.data[index];
green = imgData.data[index+1];
blue = imgData.data[index+2];
alpha = imgData.data[index+3];
}
ctx.putImageData(imgData, w2, 300);
}
但最重要的是:在 Chrome 中,您会收到安全错误。
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
我猜这可能相关:How to fix getImageData() error The canvas has been tainted by cross-origin data?
关于javascript - HTML5 Canvas : Reproduce a picture with getImageData and putImageData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28580785/
我是一名优秀的程序员,十分优秀!