JavaScript画布drawImage getImageData
JavaScript画布drawImage getImageData
提问于 2020-02-11 18:35:00
我无法理解两个方法如何使用画布: drawImage getImageData实际上，我希望将位图图像解析为一个RGBA点数组，能够转换它并使用putImageData方法显示它。但只有一件事管用: drawImage或getImageData。我请求帮助-解释这些方法是如何相互影响的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Canvas to array </title>
</head>
<body>
<canvas id="canvas" width="1200" height="600" />
<script>
"use strict"
let imageData;
let My_img = new Image();
My_img.src = 'test1.jpg';
let cnv = document.getElementById("canvas");
let ctx = cnv.getContext("2d");
My_img.onload = function() {
ctx.drawImage(My_img, 0, 0);
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let i=0; i<imageData.data.length; i+=4){
imageData.data[i]=0;
imageData.data[i+1]=255;
imageData.data[i+2]=0;
imageData.data[i+3]=222;
}
ctx.putImageData(imageData,300,300);
};
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-11 18:59:55
您需要将图像对象上的跨源标志设置为“匿名”。
My_img.crossOrigin = "Anonymous";另见：How to fix getImageData() error The canvas has been tainted by cross-origin data?
演示
let ctx = document.getElementById("canvas").getContext("2d");
let img = new Image();
img.crossOrigin = "Anonymous";
img.src = 'https://placekitten.com/200/138';
img.onload = function() {
ctx.drawImage(img, 0, 0);
setTimeout(() => filterImage(ctx), 1000);
};
// Multiply the value of the red channel by 2 and the blue channel by 3.
function filterImage(ctx) {
let d = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
for (let i = 0; i < d.data.length; i += 4) {
d.data[i + 0] = Math.min(Math.floor(d.data[i + 0] * 2.0), 0xFF); // R
d.data[i + 1] = Math.min(Math.floor(d.data[i + 1] * 1.0), 0xFF); // G
d.data[i + 2] = Math.min(Math.floor(d.data[i + 2] * 3.0), 0xFF); // B
d.data[i + 3] = 0xFF; // A
}
ctx.putImageData(d, 0, 0);
}<canvas id="canvas" width="200" height="138" />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60175359
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号