利用HTML5中Canvas处理并存储图片
warning:
这篇文章距离上次修改已过440天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="288" height="210" style="border:1px solid #000000;"></canvas>
<script>
// 假设我们有一个图片数组，每个图片都是一个base64编码的字符串
var imagesData = [
'data:image/png;base64,...',
'data:image/png;base64,...',
// ... 更多图片
];
// 获取Canvas的2D上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 保存Canvas状态
ctx.save();
// 绘制图片到Canvas
var x = 0;
imagesData.forEach(function(imageData) {
var img = new Image();
img.onload = function() {
ctx.drawImage(img, x, 0);
x += img.width;
};
img.src = imageData;
});
// 绘制完成后恢复Canvas状态
ctx.restore();
// 现在Canvas中包含了所有图片，可以将其转换为图片格式进行保存或者输出
var img = canvas.toDataURL("image/png");
// 输出或保存img的内容
console.log(img);
</script>
</body>
</html>这个例子中，我们首先定义了一个包含base64编码图片的数组。然后，我们获取Canvas元素并绘制每个图片。最后，我们使用toDataURL方法将Canvas的内容转换为一个新的base64编码的图片，这个新的图片可以用于保存或者其他用途。
评论已关闭