html5图像转换,javascript-如何将html5画布图像转换为json对象？

嗨,我必须将一组图像转换为json对象.但是,第一步我试图对单个图像进行处理,但我不知道是否创建了json对象.请帮助我检查一下是否创建对象.

这是代码：

HTML5 Example: Canvas

function drawOnCanvas() {

var ctx=document.getElementById("mycanvas").getContext('2d');

var image=new Image();

image.src="2000.png";

image.οnlοad=function() {

ctx.drawImage(image,140,0);

}

imageData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);

var jsontext=JSON.stringify(imageData.data);

}

window.addEventListener('load', drawOnCanvas, true);

解决方法:

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.rect(5, 5, 300, 250);

ctx.stroke();

ctx.arc(150, 150, 100, 0, Math.PI, false);

ctx.stroke();

canvas.addEventListener("click", function (){

var data = ctx.getImageData(0, 0, canvas.width, canvas.height);

console.log(data);

console.log(JSON.stringify(data));

var c2 = document.getElementById("c2");

var ctx2 = c2.getContext("2d");

ctx2.putImageData(data, 0, 0);

}, false);

ctx.getImageData()将返回一个对象

JSON.stringify(data)将为您生成json字符串(请参阅控制台)

标签：html5,canvas,html5-canvas,javascript

来源： https://codeday.me/bug/20191122/2058358.html