纯原生实现多张图片合成

笑笑的微笑

已于 2022-11-18 15:23:26 修改

阅读量153

点赞数

分类专栏：前端自娱自乐系列文章标签： css javascript 前端

于 2022-11-18 00:40:37 首次发布

本文链接：https://blog.csdn.net/pz3305636904/article/details/127914625

版权

大家好，我是吃饱就睡，不知道想干嘛的蔬菜乌鸦。想熟悉一下blob和canvas这些工作开发中不是特别常用东西。

纯原生实现多张图片合成

预览

图片合成及导出

⛱️一睹为快

思路

导入图片，通过blob和FileReader生成img
将img全都绘制到canvas中，通过toDataURL，将canvas转成图片
通过a标签导出

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blob</title>
    <style>
        body {
   
            background-color: #ededed;
            margin: 0;
            padding: 0;
        }
        .app {
   
            margin: 0 auto;
            width: 60%;
            height: 100vh;
            background-color: #fff;
        }
        .container {
   
            padding: 10px 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .tool-line {
   
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 8px;
            flex-grow: 1;
        }

        .tool-btn {
   
            width: 95px;
            height: 30px;
            line-height: 30px;
            outline: none;
            border: none;
            background-color: #cfc2e7