前端(vue) 如何保存修改 style 后的图片

Question

图片是base64格式，我通过给他加上 'data:image/jpeg;base64,' 来显示图片。
使用的CSS Filter处理图片。
通过el-slider调整图片的各个样式的数值，从而达成修改图片的效果

图片显示
            <el-image class="filter-image"
                      :src="imageUrlHeader + this.passenger.photo"
                      :style="{ filter: `blur(${filter.blur}px) brightness(${filter.brightness}) contrast(${filter.contrast}%) grayscale(${filter.grayscale}%) hue-rotate(${filter.hueRotate}deg) invert(${filter.invert}%) saturate(${filter.saturate}%) sepia(${filter.sepia}%) drop-shadow(${filter.offsetX}px ${filter.offsetY}px ${filter.blurRadius}px ${filter.color})`}">
            </el-image>
 
样式的设置
      this.filter = {
        blur: 0,
        brightness: 1,
        contrast: 100,
        grayscale: 0,
        hueRotate: 0,
        invert: 0,
        saturate: 100,
        sepia: 0,
        offsetX: 0,
        offsetY: 0,
        blurRadius: 0,
        spreadRadius: 0,
        color: '#000000'
      }

实现效果如下所示

现在有保存图片的需求，我应该如何把修改后的图片保存到本地

Answer 1

传入你的base64参数, 通过fs的writeFile方法即可保存到本地。

Answer 2

貌似不行。
可以用canvas初始化导入你想编辑的图片，然后在canvas里加滤镜。

// html
<canvas id="myCanvas" width="400" height="400" style="border: 2px solid grey">当前浏览器不支持canvas</canvas>

// js
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")

var img = new Image()
img.src = 'smile.png'
img.onload = function(){
    context.drawImage(this, 0, 0)
}

canvas filter api