我不知道为什么这不起作用。图像的 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 回答
红糖糍粑
TA贡献1815条经验 获得超6个赞
请试试这个：（你不需要获取或放置图像数据）
你也正在做这样的：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">
添加回答
举报
0/150
提交
取消