Question

我想连接两个或三个图像（一个底部到下一个顶部），并将该图像保存为另一个页面（购物车页面）作为缩略图。我一直在研究使用HTML5缓存清单或canvas.toDataURL（）方法。哪个更适合这个目的？

我已经为下面的toDataURL（）方法编写了代码：

<div style="width: 80px;">
    <img id="imageA" src="imageA.jpg" alt="imageA"
        width="70" height="400" >
    <img id="imageB" src="imageB.jpg" alt="imageB" 
        width="70">
    <canvas id="canvas1"></canvas>
    <script type="text/javascript">
        var img1 = document.getElementById("imageA");
        var img2 = document.getElementById("imageB");
        var canvas1 = document.getElementById("canvas1");
        var context1 = canvas1.getContext("2d");
        canvas1.width = "70";
        canvas1.height = "470";
        context1.globalAlpha = 1.0;
        var combinedImage = ctx.getImageData(0, 0, 70, 470);  
        var imgURL = canvas.toDataURL("image/png");
    </script>
</div>

Answer 1

缓存清单在此处没有相关性，除非您希望在离线时使图像可用，但在合并图像时没有效果。

显示的代码实际上并没有将图像绘制到画布中，当你调用getImageData()时，你只会得到一个空的像素缓冲区，这在这里没用。

尝试这样的事情（仅限JavaScript部分）：

var img1 = document.getElementById("imageA");
var img2 = document.getElementById("imageB");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");

canvas1.width = 70;    /// use numbers instead of strings here
canvas1.height = img1.height + img2.height;

/// draw the images onto canvas
context1.drawImage(img1, 0, 0);
context1.drawImage(img2, 0, img1.height);

var imgURL = canvas1.toDataURL();  /// defaults to PNG

现在你的imgURL将包含连接的图像作为PNG，只要满足CORS要求（即它们在同一台服务器上）。您还应该看到嵌入了两个图像的屏幕画布。

希望这有帮助。

保存HTML画布图像的方法

1 个答案: