如何仅使用Web技术(例如HTML，CSS和Javascript）重新创建图像，例如.png或.jpg

How might one recreate an image, e.g., .png or .jpg, using only web tech, e.g., HTML, CSS, and Javascript?

本文关键字：例如 新创建 jpg 创建 png 图像 Web 何仅使 技术 HTML CSS      更新时间：2023-09-26

我有兴趣拍摄任何典型格式的图像，例如PNG，JPEG等，并将其重新创建为一组排列的，单独着色的，1×1像素的HTML元素，或类似的东西。我希望能够处理图像的各个像素，即样式和脚本(运动、颜色变化等(。我该如何实现此目的？我想到了 SVG，但如果它是我应该寻找的地方，我现在对它还不够熟悉。

使用画布可以帮助使用您命名的三种语言绘制图像。例如：

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

这可以在一个框中创建一个红色方块。您还可以使用

ctx.arc();
ctx.stroke();

http://www.w3schools.com/html/html5_canvas.asp 它们还为您提供了大量详细的项目，以使用每种画布方法。

希望这就是你要找的！

相关文章：