如何为网页端图片编辑器添加下载按钮导出用户修改后的图片

你当前直接修改img元素的CSS样式属于渲染层效果，原图本身没有被修改，所以直接下载img的源地址只能拿到原图，需要通过Canvas将应用了所有滤镜、变换后的图像重新绘制再导出，具体修改步骤如下：

第一步：修改HTML新增下载按钮 #

在你现有上传按钮的代码下方新增下载触发元素：

<!-- 新增下载按钮 -->
<p><label style="cursor: pointer;" id="downloadBtn" onclick="downloadImage()">DOWNLOAD EDITED IMAGE</label></p>

第二步：修复现有JS代码的已知问题 #

你现有代码存在2处错误会影响效果继承：

1. redraw 函数的滤镜设置语法错误，且未添加invert效果，也没有兼容标准filter属性
2. original 函数仅重置了样式，没有同步重置options存储的参数，会导致后续操作异常

修复后的对应函数代码：

function original() {
    // 重置所有参数
    options.sepia = 0
    options.grayscale = 0
    options.rotation = 0
    options.scale = 1
    options.invertVal = 0
    rotation = 0
    scale = 1
    invertVal = 0
    // 重置滑块显示
    document.getElementById('sepia').value = 0
    document.getElementById('Amount').innerHTML = 0
    document.getElementById('Grayscale').value = 0
    document.getElementById('Amount2').innerHTML = 0
    // 重置样式
    document.getElementById("img").style.filter = "sepia(0) grayscale(0) invert(0%)";
    document.getElementById("img").style.webkitFilter = "sepia(0) grayscale(0) invert(0%)";
    document.querySelector("img").style.transform = "rotate(0deg) scaleX(1)";
}

function redraw() {
    const filterVal = `sepia(${options.sepia}) grayscale(${options.grayscale}) invert(${options.invertVal}%)`
    document.getElementById("img").style.filter = filterVal
    document.getElementById("img").style.webkitFilter = filterVal
    document.querySelector("img").style.transform = `rotate(${options.rotation}deg) scaleX(${options.scale})`;
}

第三步：新增下载逻辑函数 #

新增downloadImage函数，通过Canvas绘制带效果的图像后触发下载：

function downloadImage() {
    const img = document.getElementById('img')
    // 确保图片已经加载完成
    if (!img.src) return alert('请先上传图片')
    
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    
    // 处理旋转后的画布尺寸，避免内容被裁切
    const angle = options.rotation * Math.PI / 180
    const sin = Math.sin(angle)
    const cos = Math.cos(angle)
    const originalWidth = img.naturalWidth
    const originalHeight = img.naturalHeight
    const newWidth = Math.abs(originalWidth * cos) + Math.abs(originalHeight * sin)
    const newHeight = Math.abs(originalWidth * sin) + Math.abs(originalHeight * cos)
    
    canvas.width = newWidth
    canvas.height = newHeight
    
    // 应用所有滤镜参数
    ctx.filter = `sepia(${options.sepia}) grayscale(${options.grayscale}) invert(${options.invertVal}%)`
    
    // 移动坐标系到画布中心，处理旋转和翻转效果
    ctx.translate(newWidth / 2, newHeight / 2)
    ctx.rotate(angle)
    ctx.scale(options.scale, 1)
    
    // 绘制调整后的图片
    ctx.drawImage(img, -originalWidth/2, -originalHeight/2, originalWidth, originalHeight)
    
    // 导出图片并触发下载
    canvas.toBlob(function(blob) {
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = 'edited-image.png'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
    })
}

可选调整 #

如果需要导出JPG格式的图片，把toBlob的第二个参数设为'image/jpeg'，同时把download属性的文件名后缀改成.jpg即可。

内容的提问来源于stack exchange，提问作者Aditi Agarwal