Javascript Canvas 从图像中获取数据并显示它
我不知道为什么这不起作用。图像的 src 属性随新数据而变化，但图像实际上并不可见。我尝试了几种不同的图像。它只是浏览器中的 javascript 并且需要 Jquery。
<body>
<img src="" id="test">
</body>
<script>
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt
img.src = 'download.png';
function getIt() {
canvas.width = this.width;
canvas.height = this.height;
const imageData = ctx.getImageData(0, 0, this.width, this.height);
ctx.drawImage(this, canvas.width , canvas.height);
ctx.putImageData(imageData, canvas.width, canvas.height);
$('#test').get(0).src = canvas.toDataURL("image/png");
}
</script>
我尝试了几种不同的图像，都是 png。目前这是该项目的完整代码，所以我不认为有任何可能会干扰它的代码。
结果是这样，但看不到图像：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAMklEQVRIS+3SsQ0A....etc" id="test">
编辑：似乎它可能会错误地从图像中获取数据，但我不知道为什么......我的意思是为什么它会获取数据但不完整或不正确？
有只小跳蛙1回答
-
红糖糍粑
请试试这个：（你不需要获取或放置图像数据）你也正在做这样的：ctx.putImageData(imageData, canvas.width, canvas.height);。这意味着您完全在画布之外绘制图像。改为这样做：ctx.putImageData(imageData, 0,0);const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); let img = new Image(); img.onload = getIt img.src = "download.png"; function getIt() { canvas.width = this.width; canvas.height = this.height; //draw the image onto the canvas ctx.drawImage(this, 0,0); //use the data uri test.src = canvas.toDataURL("image/png"); }<img src="" id="test">
随时随地看视频慕课网APP
相关分类
JavaScript