HTML5 Canvas批改作业的实现过程及遇到的问题

2023-11-17 03:54:11

今天公司有一个新的需求，就是要在返回的作业照片里面可以涂鸦批改，批改完后就连同批改后的照片上传到服务器。这对我不怎么熟悉canvas的人来说是个挑战。

在听到这需求后的第一反应就是用canvas来做，所以我在w3school阅读了canvas的API. 我用toDataURL()函数将canvas中的图像转换为base64编码的字符串，然后将其上传到服务器。

function saveImage() {
    var canvas = document.getElementById("canvas");
    var dataURL = canvas.toDataURL("image/png");
    $.ajax({
        type: "POST",
        url: "save_image.php",
        data: { image: dataURL },
        success: function(data) {
            alert("Image saved successfully.");
        }
    });
}

这个方法虽然能够实现基本的功能，但是它存在一些问题。首先，图像的质量很差。其次，它不支持撤销和重做操作。

为了解决这些问题，我决定使用fabric.js库。fabric.js是一个功能强大的JavaScript库，它提供了丰富的功能来操作canvas。

var canvas = new fabric.Canvas("canvas");
canvas.setBackgroundImage("image.jpg", function() {
    canvas.renderAll();
});

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 50,
    height: 50,
    fill: "red"
});
canvas.add(rect);

fabric.js提供了许多有用的功能，比如撤销和重做操作，以及支持多种图像格式。

canvas.undo();
canvas.redo();
canvas.loadFromJSON(json);

在使用fabric.js的过程中，我也遇到了一些问题。比如，当图像很大时，canvas会变得非常慢。为了解决这个问题，我将图像缩小到一个合理的尺寸。

var image = new Image();
image.onload = function() {
    var width = image.width;
    var height = image.height;
    if (width > 1000 || height > 1000) {
        var scale = Math.min(1000 / width, 1000 / height);
        width *= scale;
        height *= scale;
        image.width = width;
        image.height = height;
    }
    canvas.setBackgroundImage(image, function() {
        canvas.renderAll();
    });
};
image.src = "image.jpg";