图像未显示在画布上
图像未显示在画布上
提问于 2018-10-11 01:02:21
我是第一次使用canvas，我正在练习从图像中获取数据以更改其属性。问题是我用的是下面的代码：
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio() {
setTimeout(drawing(),100000);
}
function drawing() {
var canvas = document.getElementById("cnv1");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "tomatoes.jpg"
context.drawImage(img, 10, 10);
var imageData = context.getImageData(0, 0, 500, 500);
var data = imageData.data;
/*for (var i=0; i<data.length; i+= 4) {
data[i] = 255-data[i];
data[i+1] = 255-data[i+1];
data[i+2] = 255-data[i+2];
}*/
/*for (var i=0; i<data.length; i+= 4) {
data[i] = data[i]+100;
data[i+1] = data[i+1]+100;
data[i+2] = data[i+2]+100;
}*/
for (var i=0; i<data.length; i+= 4) {
data[i] = data[i]-100;
data[i+1] = data[i+1]-100;
data[i+2] = data[i+2]-100;
}
context.putImageData(imageData,0,0)
}
</script>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>我得到了for方法的正确结果，我的问题是大多数时候图像根本不会加载，它只出现在一个页面刷新中，而下一个刷新消失了，它不能正常工作。有什么好主意吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-11 03:14:16
接下来是我的代码，但它不能在Stack Overflow上工作。您必须复制代码并在您的计算机中测试它。您可以在此Codepen project中看到它的工作方式。
重要提示:您必须使用来自您的站点的图像。否则你会得到这样的错误:未捕获DOMException:无法在‘CanvasRenderingContext2D’上执行'getImageData‘：画布已被跨源数据污染。是的，有一些方法可以绕过这个问题。并不总是有效
关于您的代码的观察:请不要这样做：data[i]-100 since data[i]可能小于100。
function drawing() {
var data;
var canvas = document.getElementById("cnv1");
var cw = (canvas.width = 270);
var ch = (canvas.height = 250);
var context = canvas.getContext("2d");
var img=new Image();
img.src = "image.jpg";
img.onload = function() {
context.drawImage(this, 10, 10);
var imageData = context.getImageData(0, 0, 270, 250);
data = imageData.data;
console.log(imageData.data)
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
}
context.putImageData(imageData, 0, 0);
}
}
drawing()<canvas id="cnv1"></canvas>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52745367
复制相关文章
相似问题
腾讯云开发者
