Question

使用html5 canvas对象进行javascript图像操作时遇到问题。尝试做什么： - 我得到一个base64编码的图像，并尝试将文件名添加到图片的左下方

我编写了以下代码来解决问题，但我遇到了一个新问题

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
</head>
<body>
    <textarea style="width: 800px; height: 600px;" id="myTextarea"></textarea>
    <script type="text/javascript">
        var c = document.createElement("CANVAS");
        c.width = 800;
        c.height = 600;
        var ctx = c.getContext("2d");

        var imgData= 'data:image/jpeg;base64,/9j/[abgekürzt]';

        var myImage = new Image();
        myImage.src = imgData;
        ctx.drawImage(myImage, 0, 0);

        // create watermark
        var watermark = "Filename_code_sequentialNumber";
        ctx.font = "20px Courier";
        ctx.textAlign = 'left';
        ctx.fillStyle = 'yellow';
        ctx.fillText(watermark, 20, 580)

        var res = c.toDataURL();

        var c1 = document.createElement("CANVAS");
        c1.width = 800;
        c1.height = 600;
        var ctx1 = c1.getContext("2d");

        var myImage1 = new Image();
        myImage1.src = res;
        ctx.drawImage(myImage1, 0, 0);

        document.body.appendChild(c);
        document.getElementById('myTextarea').value = res;
    </script>
</body>

目前的问题是，当我在浏览器中打开网站时，我只看到空白图像上的水印。重新加载网站后，我得到了所需的结果，并在上面加上水印的图像。

有谁知道如何解决重装问题？

用画布在js中进行图像处理

0 个答案: